@thednp/shorty 2.0.0-alpha1 → 2.0.0-alpha10

package/src/class/addClass.ts

@@ -1,11 +1,11 @@
 /**
- * Add class to `HTMLElement.classList`.
+ * Add one or more CSS classes to `HTMLElement.classList`.
  *
  * @param element target
  * @param classNAME to add
  */
-const addClass = (element: HTMLElement, classNAME: string): void => {
-  element.classList.add(classNAME);
+const addClass = (element: HTMLElement, ...classNAME: string[]): void => {
+  element.classList.add(...classNAME);
 };
 
 export default addClass;

package/src/class/removeClass.ts

@@ -1,11 +1,11 @@
 /**
- * Remove class from `HTMLElement.classList`.
+ * Remove one or more classes from `HTMLElement.classList`.
  *
  * @param element target
  * @param classNAME to remove
  */
-const removeClass = (element: HTMLElement, classNAME: string): void => {
-  element.classList.remove(classNAME);
+const removeClass = (element: HTMLElement, ...classNAME: string[]): void => {
+  element.classList.remove(...classNAME);
 };
 
 export default removeClass;

package/src/event/off.ts

@@ -1,12 +1,14 @@
 /**
- * Remove eventListener from an `HTMLElement` | `Document` | `Window` target.
+ * Remove eventListener from an `EventTarget` object.
  */
-export default function off(
+const off = (
   element: EventTarget,
   eventName: string,
-  listener: EventListenerObject["handleEvent"],
-  options?: AddEventListenerOptions
-) {
+  listener: EventListener,
+  options?: AddEventListenerOptions,
+) => {
   const ops = options || false;
   element.removeEventListener(eventName, listener, ops);
-}
+};
+
+export default off;

package/src/event/on.ts

@@ -1,12 +1,14 @@
 /**
- * Add eventListener to an `HTMLElement` | `Document` target.
+ * Add eventListener to an `EventTarget` object.
  */
-export default function on(
+const on = (
   element: EventTarget,
   eventName: string,
-  listener: EventListenerObject["handleEvent"],
-  options?: AddEventListenerOptions
-) {
+  listener: EventListener,
+  options?: AddEventListenerOptions,
+) => {
   const ops = options || false;
   element.addEventListener(eventName, listener, ops);
-}
+};
+
+export default on;

package/src/event/one.ts

@@ -1,20 +1,20 @@
-import on from "./on";
-import off from "./off";
+import on from './on';
+import off from './off';
 
 /**
- * Add an `eventListener` to an `HTMLElement` | `Document` | `Window`
- * target and remove it once callback is called.
+ * Add an `eventListener` to an `EventTarget`
+ * element and remove it once callback is called.
  */
 const one = (
   element: EventTarget,
   eventName: string,
-  listener: EventListenerObject["handleEvent"],
-  options?: AddEventListenerOptions
+  listener: EventListener,
+  options?: AddEventListenerOptions,
 ) => {
   /** Wrap the listener for easy on -> off */
   const handlerWrapper = (e: Event): void => {
     /* istanbul ignore else */
-    if (e.target === element) {
+    if (e.target === element || e.currentTarget === element) {
       listener.apply(element, [e]);
       off(element, eventName, handlerWrapper, options);
     }

package/src/get/getBoundingClientRect.ts

@@ -1,8 +1,9 @@
-import isHTMLElement from "../is/isHTMLElement";
-import BoundingClientRect from "../interface/boundingClientRect";
+import isHTMLElement from '../is/isHTMLElement';
+import type { BoundingClientRect } from '../interface/boundingClientRect';
 
 /**
  * Returns the bounding client rect of a target `HTMLElement`.
+ *
  * @see https://github.com/floating-ui/floating-ui
  *
  * @param element event.target
@@ -11,7 +12,7 @@ import BoundingClientRect from "../interface/boundingClientRect";
  */
 const getBoundingClientRect = (
   element: HTMLElement,
-  includeScale?: boolean
+  includeScale?: boolean,
 ): BoundingClientRect => {
   const { width, height, top, right, bottom, left } = element.getBoundingClientRect();
   let scaleX = 1;

package/src/get/getDocument.ts

@@ -1,21 +1,22 @@
-import isNode from "../is/isNode";
-import isWindow from "../is/isWindow";
-import isDocument from "../is/isDocument";
+import isNode from '../is/isNode';
+import isWindow from '../is/isWindow';
+import isDocument from '../is/isDocument';
 
 /**
  * Returns the `document` or the `#document` element.
+ *
  * @see https://github.com/floating-ui/floating-ui
  *
- * @param node the target node
+ * @param node the reference node
  * @returns the parent document of the given node
  */
-const getDocument = (node?: any): Document => {
+const getDocument = (node?: Node | Document | Window): Document => {
+  // node instanceof Window
+  if (isWindow(node)) return node.document;
   // node instanceof Document
   if (isDocument(node)) return node;
   // node instanceof Node
-  if (isNode(node)) return node.ownerDocument;
-  // node instanceof Window
-  if (isWindow(node)) return node.document;
+  if (isNode(node)) return node.ownerDocument as Document;
   // node is undefined | NULL
   return window.document;
 };

package/src/get/getDocumentBody.ts

@@ -1,12 +1,12 @@
-import getDocument from "./getDocument";
+import getDocument from './getDocument';
 
 /**
  * Returns the `document.body` or the `<body>` element.
  *
- * @param node reference node
+ * @param node the reference node
  * @returns the parent `<body>` of the specified node
  */
-const getDocumentBody = (node?: any): HTMLElement => {
+const getDocumentBody = (node?: Node | Document | Window): HTMLElement => {
   return getDocument(node).body;
 };
 

package/src/get/getDocumentElement.ts

@@ -1,12 +1,12 @@
-import getDocument from "./getDocument";
+import getDocument from './getDocument';
 
 /**
  * Returns the `document.documentElement` or the `<HTML>` element.
  *
- * @param node reference node
+ * @param node the reference node
  * @returns the parent `<HTML>` of the node's parent document
  */
-const getDocumentElement = (node?: Node): HTMLElement => {
+const getDocumentElement = (node?: Node | Document | Window): HTMLElement => {
   return getDocument(node).documentElement;
 };
 

package/src/get/getDocumentHead.ts

@@ -1,11 +1,11 @@
-import getDocument from "./getDocument";
+import getDocument from './getDocument';
 /**
  * Returns the `document.head` or the `<head>` element.
  *
- * @param node reference node
+ * @param node the reference node
  * @returns the `<head>` of the node's parent document
  */
-const getDocumentHead = (node?: Node): HTMLElement => {
+const getDocumentHead = (node?: Node | Document | Window): HTMLElement & HTMLHeadElement => {
   return getDocument(node).head;
 };
 

package/src/get/getElementAnimationDelay.ts

@@ -1,6 +1,6 @@
-import animationDelay from "../strings/animationDelay";
-import animationName from "../strings/animationName";
-import getElementStyle from "./getElementStyle";
+import animationDelay from '../strings/animationDelay';
+import animationName from '../strings/animationName';
+import getElementStyle from './getElementStyle';
 
 /**
  * Utility to get the computed `animationDelay`
@@ -12,12 +12,11 @@ import getElementStyle from "./getElementStyle";
 const getElementAnimationDelay = (element: HTMLElement): number => {
   const propertyValue = getElementStyle(element, animationName);
   const durationValue = getElementStyle(element, animationDelay);
-  const durationScale = durationValue.includes("ms") ? /* istanbul ignore next */ 1 : 1000;
+  const durationScale = durationValue.includes('ms') ? /* istanbul ignore next */ 1 : 1000;
   const duration =
-    propertyValue && propertyValue !== "none" ? parseFloat(durationValue) * durationScale : 0;
+    propertyValue && propertyValue !== 'none' ? parseFloat(durationValue) * durationScale : 0;
 
-  /* istanbul ignore next */
-  return !Number.isNaN(duration) ? duration : 0;
+  return !Number.isNaN(duration) ? duration : /* istanbul ignore next */ 0;
 };
 
 export default getElementAnimationDelay;

package/src/get/getElementAnimationDuration.ts

@@ -1,6 +1,6 @@
-import animationDuration from "../strings/animationDuration";
-import animationName from "../strings/animationName";
-import getElementStyle from "./getElementStyle";
+import animationDuration from '../strings/animationDuration';
+import animationName from '../strings/animationName';
+import getElementStyle from './getElementStyle';
 
 /**
  * Utility to get the computed `animationDuration`
@@ -12,9 +12,9 @@ import getElementStyle from "./getElementStyle";
 const getElementAnimationDuration = (element: HTMLElement): number => {
   const propertyValue = getElementStyle(element, animationName);
   const durationValue = getElementStyle(element, animationDuration);
-  const durationScale = durationValue.includes("ms") ? /* istanbul ignore next */ 1 : 1000;
+  const durationScale = durationValue.includes('ms') ? /* istanbul ignore next */ 1 : 1000;
   const duration =
-    propertyValue && propertyValue !== "none" ? parseFloat(durationValue) * durationScale : 0;
+    propertyValue && propertyValue !== 'none' ? parseFloat(durationValue) * durationScale : 0;
 
   return !Number.isNaN(duration) ? duration : /* istanbul ignore next */ 0;
 };

package/src/get/getElementStyle.ts

@@ -1,3 +1,5 @@
+// import CSS4Declaration from "../interface/css4Declaration";
+
 /**
  * Shortcut for `window.getComputedStyle(element).propertyName`
  * static method.
@@ -11,12 +13,13 @@
  */
 const getElementStyle = (element: HTMLElement, property: string): string => {
   const computedStyle = getComputedStyle(element);
+  const prop = property
+    .replace('webkit', 'Webkit')
+    .replace(/([A-Z])/g, '-$1')
+    .toLowerCase();
 
-  // must use camelcase strings,
-  // or non-camelcase strings with `getPropertyValue`
-  return property.includes("--")
-    ? computedStyle.getPropertyValue(property)
-    : computedStyle[property as any];
+  // modern browsers only
+  return computedStyle.getPropertyValue(prop);
 };
 
 export default getElementStyle;

package/src/get/getElementTransitionDelay.ts

@@ -1,6 +1,6 @@
-import transitionDelay from "../strings/transitionDelay";
-import transitionProperty from "../strings/transitionProperty";
-import getElementStyle from "./getElementStyle";
+import transitionDelay from '../strings/transitionDelay';
+import transitionProperty from '../strings/transitionProperty';
+import getElementStyle from './getElementStyle';
 
 /**
  * Utility to get the computed `transitionDelay`
@@ -12,9 +12,11 @@ import getElementStyle from "./getElementStyle";
 const getElementTransitionDelay = (element: HTMLElement): number => {
   const propertyValue = getElementStyle(element, transitionProperty);
   const delayValue = getElementStyle(element, transitionDelay);
-  const delayScale = delayValue.includes("ms") ? /* istanbul ignore next */ 1 : 1000;
+  const delayScale = delayValue.includes('ms') ? /* istanbul ignore next */ 1 : 1000;
   const duration =
-    propertyValue && propertyValue !== "none" ? parseFloat(delayValue) * delayScale : 0;
+    propertyValue && propertyValue !== 'none'
+      ? parseFloat(delayValue) * delayScale
+      : /* istanbul ignore next */ 0;
 
   return !Number.isNaN(duration) ? duration : /* istanbul ignore next */ 0;
 };

package/src/get/getElementTransitionDuration.ts

@@ -1,6 +1,6 @@
-import transitionDuration from "../strings/transitionDuration";
-import transitionProperty from "../strings/transitionProperty";
-import getElementStyle from "./getElementStyle";
+import transitionDuration from '../strings/transitionDuration';
+import transitionProperty from '../strings/transitionProperty';
+import getElementStyle from './getElementStyle';
 
 /**
  * Utility to get the computed `transitionDuration`
@@ -12,9 +12,11 @@ import getElementStyle from "./getElementStyle";
 const getElementTransitionDuration = (element: HTMLElement): number => {
   const propertyValue = getElementStyle(element, transitionProperty);
   const durationValue = getElementStyle(element, transitionDuration);
-  const durationScale = durationValue.includes("ms") ? /* istanbul ignore next */ 1 : 1000;
+  const durationScale = durationValue.includes('ms') ? /* istanbul ignore next */ 1 : 1000;
   const duration =
-    propertyValue && propertyValue !== "none" ? parseFloat(durationValue) * durationScale : 0;
+    propertyValue && propertyValue !== 'none'
+      ? parseFloat(durationValue) * durationScale
+      : /* istanbul ignore next */ 0;
 
   return !Number.isNaN(duration) ? duration : /* istanbul ignore next */ 0;
 };

package/src/get/getNodeScroll.ts

@@ -1,4 +1,4 @@
-import isWindow from "src/is/isWindow";
+import isWindow from '../is/isWindow';
 
 /**
  * Returns an `{x,y}` object with the target

package/src/get/getParentNode.ts

@@ -1,24 +1,27 @@
-import getDocumentElement from "./getDocumentElement";
-import isShadowRoot from "../is/isShadowRoot";
+import getDocumentElement from './getDocumentElement';
+import isShadowRoot from '../is/isShadowRoot';
+import isHTMLElement from '../is/isHTMLElement';
+import isNode from '../is/isNode';
 
 /**
  * Returns the `parentNode` also going through `ShadowRoot`.
+ *
  * @see https://github.com/floating-ui/floating-ui
  *
  * @param {Node} node the target node
  * @returns {Node} the apropriate parent node
  */
-const getParentNode = (node: Node): Node => {
-  if (node.nodeName === "HTML") {
+const getParentNode = (node: Node): Node | ParentNode => {
+  if (node.nodeName === 'HTML') {
     return node;
   }
 
   // this is a quicker (but less type safe) way to save quite some bytes from the bundle
   return (
-    (node as HTMLElement).assignedSlot || // step into the shadow DOM of the parent of a slotted node
-    node.parentNode || // DOM Element detected
-    (isShadowRoot(node as ShadowRoot) && (node as ShadowRoot).host) || // ShadowRoot detected
-    getDocumentElement(node) // fallback
+    (isHTMLElement(node) && node.assignedSlot) || // step into the shadow DOM of the parent of a slotted node
+    (isNode(node) && node.parentNode) || // DOM Element detected
+    (isShadowRoot(node) && node.host) || // ShadowRoot detected
+    getDocumentElement(node) // fallback to <HTML>
   );
 };
 

package/src/get/getRectRelativeToOffsetParent.ts

@@ -1,21 +1,22 @@
-import OffsetRect from "../interface/offsetRect";
-import isScaledElement from "../is/isScaledElement";
-import isHTMLElement from "../is/isHTMLElement";
-import getBoundingClientRect from "./getBoundingClientRect";
+import type { OffsetRect } from '../interface/offsetRect';
+import isScaledElement from '../is/isScaledElement';
+import isHTMLElement from '../is/isHTMLElement';
+import getBoundingClientRect from './getBoundingClientRect';
 
 /**
- * Returns the rect relative to an offset parent.
+ * Returns the rect relative to a given offset parent and its scroll position.
+ *
  * @see https://github.com/floating-ui/floating-ui
  *
  * @param element target
  * @param offsetParent the container / offset parent
  * @param scroll the offsetParent scroll position
- * @returns {SHORTY.OffsetRect}
+ * @returns a DOMRect like object
  */
 const getRectRelativeToOffsetParent = (
   element: HTMLElement,
   offsetParent: HTMLElement,
-  scroll: { x: number; y: number }
+  scroll: { x: number; y: number },
 ): OffsetRect => {
   const isParentAnElement = isHTMLElement(offsetParent);
   const rect = getBoundingClientRect(element, isParentAnElement && isScaledElement(offsetParent));

package/src/get/getUID.ts

@@ -1,12 +1,18 @@
+import isMap from '../is/isMap';
+
 let elementUID = 0;
 let elementMapUID = 0;
-const elementIDMap = new Map();
+
+type KeyIdMap = Map<string | number, number>;
+type IDMap = Map<number | string | HTMLElement, number | KeyIdMap>;
+
+const elementIDMap: IDMap = new Map();
 
 /**
  * Returns a unique identifier for popover, tooltip, scrollspy.
  *
  * @param element target element
- * @param key predefined key
+ * @param key optional identifier key
  * @returns an existing or new unique ID
  */
 const getUID = (element: HTMLElement, key?: string): number => {
@@ -14,21 +20,21 @@ const getUID = (element: HTMLElement, key?: string): number => {
 
   if (key) {
     const elID = getUID(element);
-    const elMap = elementIDMap.get(elID) || new Map();
+    const elMap = elementIDMap.get(elID) || (new Map() as KeyIdMap);
     if (!elementIDMap.has(elID)) {
       elementIDMap.set(elID, elMap);
     }
-    if (!elMap.has(key)) {
-      elMap.set(key, result);
+    if (isMap(elMap as KeyIdMap) && !(elMap as KeyIdMap).has(key)) {
+      (elMap as KeyIdMap).set(key, result);
       elementUID += 1;
-    } else result = elMap.get(key);
+    } else result = (elMap as KeyIdMap).get(key) as number;
   } else {
     const elkey = element.id || element;
 
     if (!elementIDMap.has(elkey)) {
       elementIDMap.set(elkey, result);
       elementMapUID += 1;
-    } else result = elementIDMap.get(elkey);
+    } else result = elementIDMap.get(elkey) as number;
   }
   return result;
 };

package/src/get/getWindow.ts

@@ -1,20 +1,21 @@
-import isDocument from "../is/isDocument";
-import isNode from "../is/isNode";
+import isDocument from '../is/isDocument';
+import isNode from '../is/isNode';
 
 /**
  * Returns the `Window` object of a target node.
+ *
  * @see https://github.com/floating-ui/floating-ui
  *
  * @param node target node
  * @returns the `Window` object
  */
-const getWindow = (node?: any): Window => {
+const getWindow = (node?: Node): Window => {
   // node is undefined | NULL
   if (!node) return window;
   // node instanceof Document
-  if (isDocument(node)) return node.defaultView;
+  if (isDocument(node)) return node.defaultView as Window;
   // node instanceof Node
-  if (isNode(node)) return node.ownerDocument.defaultView;
+  if (isNode(node)) return node?.ownerDocument?.defaultView as Window;
   // node is instanceof Window
   return node;
 };