@onereach/ui-components-common 19.3.0-beta.5083.0

package/src/utils/functions/dom.ts

@@ -0,0 +1,206 @@
+import get from 'lodash/get';
+import isElement from 'lodash/isElement';
+
+const WINDOW = typeof window !== 'undefined' ? window : null;
+
+export const MutationObs: MutationObserver =
+  WINDOW?.MutationObserver
+  || (WINDOW as any)?.WebKitMutationObserver
+  || (WINDOW as any)?.MozMutationObserver
+  || null;
+
+export const requestAF = (
+  WINDOW?.requestAnimationFrame ||
+  (WINDOW as any)?.webkitRequestAnimationFrame ||
+  (WINDOW as any)?.mozRequestAnimationFrame ||
+  (WINDOW as any)?.msRequestAnimationFrame ||
+  (WINDOW as any)?.oRequestAnimationFrame ||
+  // Fallback, but not a true polyfill
+  // Only needed for Opera Mini
+  ((cb: () => void) => setTimeout(cb, 16))
+).bind(WINDOW);
+
+// eslint-disable-next-line no-unsafe-optional-chaining
+export const cancelAF = (WINDOW?.cancelAnimationFrame || (WINDOW as any)?.mozCancelAnimationFrame).bind(WINDOW);
+
+// Remove a node from DOM
+export const removeNode = (el: HTMLElement): void => { el && el.parentNode && el.parentNode.removeChild(el); };
+
+// Cause/wait-for an element to reflow its content (adjusting its height/width)
+export const reflow = (el: HTMLElement): number | null => {
+  // Requesting an elements offsetHeight will trigger a reflow of the element content
+  return get(el, ['offsetHeight'], null);
+};
+
+// Select all elements matching selector. Returns `[]` if none found
+export const selectAll = (selector: string, root?: HTMLElement | undefined): Element[] =>
+  [...(root && isElement(root) ? root : document).querySelectorAll(selector)];
+
+// Select a single element, returns `null` if not found
+export const select = (selector: string, root?: HTMLElement | undefined): Element | null =>
+  (root && isElement(root) ? root : document).querySelector(selector) || null;
+
+// Returns true if the parent element contains the child element
+export const contains = (parent: HTMLElement, child: HTMLElement): boolean =>
+  parent && typeof parent.contains === 'function' ? parent.contains(child) : false;
+
+// Get an element given an ID
+export const getById = (id: string): HTMLElement | null =>
+  document.getElementById(/^#/.test(id) ? id.slice(1) : id) || null;
+
+// Add a class to an element
+export const addClass = (el: HTMLElement, className: string): void => {
+  // We are checking for `el.classList` existence here since IE 11
+  // returns `undefined` for some elements (e.g. SVG elements)
+  if (className && isElement(el) && el.classList) {
+    el.classList.add(className);
+  }
+};
+
+// Remove a class from an element
+export const removeClass = (el: HTMLElement, className: string): void => {
+  // We are checking for `el.classList` existence here since IE 11
+  // returns `undefined` for some elements (e.g. SVG elements)
+  if (className && isElement(el) && el.classList) el.classList.remove(className);
+};
+
+// Test if an element has a class
+export const hasClass = (el: HTMLElement, className: string): boolean => {
+  // We are checking for `el.classList` existence here since IE 11
+  // returns `undefined` for some elements (e.g. SVG elements)
+  if (className && isElement(el) && el.classList) return el.classList.contains(className);
+
+  return false;
+};
+
+// Set an attribute on an element
+export const setAttr = (el: HTMLElement, attr: string, value: any): void => {
+  if (attr && isElement(el)) {
+    el.setAttribute(attr, value);
+  }
+};
+
+// Remove an attribute from an element
+export const removeAttr = (el: HTMLElement, attr: string): void => {
+  if (attr && isElement(el)) {
+    el.removeAttribute(attr);
+  }
+};
+
+// Get an attribute value from an element
+export const getAttr = (el: HTMLElement, attr: string): string | null =>
+  (attr && isElement(el) ? el.getAttribute(attr) : null);
+
+// Determine if an attribute exists on an element
+// Returns `true` or `false`, or `null` if element not found
+export const hasAttr = (el: HTMLElement, attr: string): boolean | null =>
+  (attr && isElement(el) ? el.hasAttribute(attr) : null);
+
+// Set an style property on an element
+export const setStyle = (el: HTMLElement, prop: any, value: any): void => {
+  if (prop && isElement(el)) {
+    el.style[prop] = value;
+  }
+};
+
+// Remove an style property from an element
+export const removeStyle = (el: HTMLElement, prop: any): void => {
+  if (prop && isElement(el)) {
+    el.style[prop] = '';
+  }
+};
+
+// Get an style property value from an element
+// Returns `null` if not found
+export const getStyle = (el: HTMLElement, prop: any): string | null =>
+  (prop && isElement(el) ? el.style[prop] || null : null);
+
+// Return the Bounding Client Rect of an element
+export const getBCR = (el: HTMLElement): DOMRect | null => (isElement(el) ? el.getBoundingClientRect() : null);
+
+// Get computed style object for an element
+export const getCS = (el: HTMLElement): CSSStyleDeclaration | Record<string, string> =>
+  get(WINDOW, 'getComputedStyle', null) && isElement(el)
+    ? getComputedStyle(el)
+    : {};
+
+// Return an element's offset with respect to document element
+export const offset = (el: HTMLElement): { top: number; left: number; } => {
+  const _offset = {
+    top: 0,
+    left: 0,
+  };
+
+  if (!isElement(el) || el.getClientRects().length === 0) {
+    return _offset;
+  }
+
+  const bcr = getBCR(el);
+  if (bcr) {
+    const win = el.ownerDocument.defaultView;
+
+    _offset.top = bcr.top + get(win, 'pageYOffset', 0);
+    _offset.left = bcr.left + get(win, 'pageXOffset', 0);
+  }
+
+  return _offset;
+};
+
+// Return an element's offset with respect to to its offsetParent
+export const position = (el: HTMLElement): { top: number; left: number; } => {
+  let _offset = {
+    top: 0,
+    left: 0,
+  };
+
+  if (!isElement(el)) {
+    return _offset;
+  }
+
+  let parentOffset = {
+    top: 0,
+    left: 0,
+  };
+
+  const elStyles = getCS(el);
+
+  if (elStyles.position === 'fixed') {
+    _offset = getBCR(el) || _offset;
+  } else {
+    _offset = offset(el);
+    const doc = el.ownerDocument;
+    let offsetParent: (Node & ParentNode) | null = el.offsetParent || doc.documentElement;
+    while (
+      offsetParent &&
+      (offsetParent === doc.body || offsetParent === doc.documentElement) &&
+      getCS(offsetParent as HTMLElement).position === 'static'
+    ) {
+      offsetParent = offsetParent.parentNode;
+    }
+    if (offsetParent && offsetParent !== el && offsetParent.nodeType === Node.ELEMENT_NODE) {
+      parentOffset = offset(offsetParent as HTMLElement);
+
+      const offsetParentStyles = getCS(offsetParent as HTMLElement);
+      parentOffset.top += parseFloat(offsetParentStyles.borderTopWidth as string);
+      parentOffset.left += parseFloat(offsetParentStyles.borderLeftWidth as string);
+    }
+  }
+
+  return {
+    top: _offset.top - parentOffset.top - parseFloat(elStyles.marginTop as string),
+    left: _offset.left - parentOffset.left - parseFloat(elStyles.marginLeft as string),
+  };
+};
+
+export const getMaxZIndex = (element: HTMLElement | null): number => {
+  let maxZIndex = 0;
+  while (element) {
+    const cs = getCS(element);
+    const zIndex = cs.zIndex;
+    if (zIndex !== 'auto') {
+      maxZIndex = +zIndex > maxZIndex ? +zIndex : maxZIndex;
+    }
+    element = element.parentElement;
+  }
+  return maxZIndex;
+};

package/src/utils/functions/flattenDeep.ts

@@ -0,0 +1,5 @@
+export function flattenDeep(arr: any[] = []): any[] {
+  return arr.flatMap((subArray) => Array.isArray(subArray) ? flattenDeep(subArray) : subArray);
+}
+
+export default flattenDeep;

package/src/utils/functions/hash.ts

@@ -0,0 +1,10 @@
+export function getHashOfString(str: string): number {
+  return Math.abs(
+    str.split('')
+      .reduce((hash, char) => char.charCodeAt(0) + ((hash << 5) - hash), 0),
+  );
+}
+
+export function normalize(hash: number, min: number, max: number): number {
+  return Math.floor((hash % (max - min)) + min);
+}

package/src/utils/functions/px-to-rem.ts

@@ -0,0 +1,2 @@
+export const pxToRem = (value: number): string =>
+  value === 0 ? '0' : `${value / 16}rem`;

package/src/utils/functions/text.ts

@@ -0,0 +1,8 @@
+import { RX_ABBREVIATION_FROM_STRING } from '../constants/regex';
+
+export function getAbbreviation(text: string | null, limit?: number): string {
+  if (typeof text != 'string' || !text) return '';
+  return ((text.match(RX_ABBREVIATION_FROM_STRING) ?? []) as string[])
+    .reduce((previous: string, next: string) => previous + ((+next === 0 || parseInt(next)) ? parseInt(next) : next[0] || ''), '')
+    .toUpperCase().substring(0, limit);
+}

package/src/utils/include.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns a copy of the `items` array, including the `value`.
+ */
+export const include = <T>(value: T, items: T[]): typeof items => {
+  return items.concat(value);
+};

package/src/utils/index.ts

@@ -0,0 +1,28 @@
+export * from './constants/color';
+export * from './constants/key-codes';
+export * from './constants/poper';
+export * from './constants/regex';
+export * from './exclude';
+
+export * from './functions/color';
+export * from './functions/dom';
+export * from './functions/flattenDeep';
+export * from './functions/hash';
+export * from './functions/px-to-rem';
+export * from './functions/text';
+
+export * from './include';
+export * from './isAncestor';
+export * from './isArray';
+export * from './isDescendant';
+export * from './isEmpty';
+export * from './isEqual';
+export * from './isNil';
+export * from './isNull';
+export * from './isNumber';
+export * from './isObject';
+export * from './isString';
+export * from './isUndefined';
+export * from './isVisible';
+export * from './toArray';
+export * from './extractCssVarName';

package/src/utils/isAncestor.ts

@@ -0,0 +1,16 @@
+/**
+ * Determines whether the element `a` is an ancestor of the element `b`.
+ */
+export const isAncestor = (a: Element, b: Element): boolean => {
+  const { parentElement } = b;
+
+  if (!parentElement) {
+    return false;
+  }
+
+  if (a === parentElement) {
+    return true;
+  }
+
+  return isAncestor(a, parentElement);
+};

package/src/utils/isArray.ts

@@ -0,0 +1,6 @@
+/**
+ * Determines whether the `value` is an array literal.
+ */
+export const isArray = (value: unknown): value is Array<unknown> => {
+  return Array.isArray(value);
+};

package/src/utils/isDescendant.ts

@@ -0,0 +1,16 @@
+/**
+ * Determines whether the element `a` is a descendant of the element `b`.
+ */
+export const isDescendant = (a: Element, b: Element): boolean => {
+  const { parentElement } = a;
+
+  if (!parentElement) {
+    return false;
+  }
+
+  if (b === parentElement) {
+    return true;
+  }
+
+  return isDescendant(parentElement, b);
+};

package/src/utils/isEmpty.ts

@@ -0,0 +1,24 @@
+import { isArray, isNil, isObject, isString } from '.';
+
+/**
+ * Determines whether the `value` is an empty object, an empty array, a zero-length string, `null`, or `undefined`.
+ */
+export const isEmpty = (value: unknown): boolean => {
+  if (isNil(value)) {
+    return true;
+  }
+
+  if (isString(value)) {
+    return value.length === 0;
+  }
+
+  if (isArray(value)) {
+    return value.length === 0;
+  }
+
+  if (isObject(value)) {
+    return Object.keys(value).length === 0;
+  }
+
+  return false;
+};

package/src/utils/isEqual.ts

@@ -0,0 +1,23 @@
+import { isArray, isObject } from '.';
+
+/**
+ * Determines whether `a` and `b` are the same value (makes shallow comparison of arrays and objects).
+ */
+export const isEqual = (a: unknown, b: unknown): boolean => {
+  if (Object.is(a, b)) {
+    return true;
+  }
+
+  if (isArray(a) && isArray(b)) {
+    return a.length === b.length && a.every((item, index) => item === b[index]);
+  }
+
+  if (isObject(a) && isObject(b)) {
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+
+    return isEqual(aKeys, bKeys) && aKeys.every((key) => a[key] === b[key]);
+  }
+
+  return false;
+};

package/src/utils/isNil.ts

@@ -0,0 +1,8 @@
+import { isNull, isUndefined } from '.';
+
+/**
+ * Determines whether the `value` is `null` or `undefined`.
+ */
+export const isNil = (value: unknown): value is null | undefined => {
+  return isNull(value) || isUndefined(value);
+};

package/src/utils/isNull.ts

@@ -0,0 +1,6 @@
+/**
+ * Determines whether the `value` is `null`.
+ */
+export const isNull = (value: unknown): value is null => {
+  return value === null;
+};

package/src/utils/isNumber.ts

@@ -0,0 +1,6 @@
+/**
+ * Determines whether the `value` is a number.
+ */
+export const isNumber = (value: unknown): value is number => {
+  return typeof value === 'number';
+};

package/src/utils/isObject.ts

@@ -0,0 +1,6 @@
+/**
+ * Determines whether the `value` is an object literal.
+ */
+export const isObject = (value: unknown): value is Record<PropertyKey, unknown> => {
+  return typeof value === 'object' && value?.constructor === Object;
+};

package/src/utils/isString.ts

@@ -0,0 +1,6 @@
+/**
+ * Determines whether the `value` is a string.
+ */
+export const isString = (value: unknown): value is string => {
+  return typeof value === 'string';
+};

package/src/utils/isUndefined.ts

@@ -0,0 +1,6 @@
+/**
+ * Determines whether the `value` is `undefined`.
+ */
+export const isUndefined = (value: unknown): value is undefined => {
+  return value === undefined;
+};

package/src/utils/isVisible.ts

@@ -0,0 +1,3 @@
+export const isVisible = (element: Element): boolean => {
+  return element.getClientRects().length > 0;
+};

package/src/utils/toArray.ts

@@ -0,0 +1,16 @@
+import { isArray, isNil } from '.';
+
+/**
+ * Converts the `value` to an array literal.
+ */
+export const toArray = <T>(value: T | T[]): T[] => {
+  if (isNil(value)) {
+    return [];
+  }
+
+  if (isArray(value)) {
+    return value;
+  }
+
+  return [value];
+};