@nectary/components 0.42.1 → 0.44.0

package/utils/index.js

@@ -1,301 +1,8 @@
-import pkg from '../package.json';
-const nectaryDefinitions = new Map();
-let nectaryRegistry = null;
-export const defineCustomElement = (name, constructor) => {
-  if (nectaryRegistry !== null) {
-    if (nectaryRegistry.get(name) == null) {
-      nectaryRegistry.define(name, constructor);
-    }
-    return;
-  }
-  nectaryDefinitions.set(name, constructor);
-};
-export const setNectaryRegistry = registry => {
-  if (nectaryRegistry !== null) {
-    throw new Error('Nectary elements already registered');
-  }
-  nectaryRegistry = registry;
-  for (const [name, ctor] of nectaryDefinitions.entries()) {
-    if (nectaryRegistry.get(name) == null) {
-      nectaryRegistry.define(name, ctor);
-    }
-  }
-  nectaryDefinitions.clear();
-};
-export class NectaryElement extends HTMLElement {
-  attachShadow(options) {
-    return super.attachShadow({
-      mode: 'closed',
-      delegatesFocus: false,
-      customElements: nectaryRegistry,
-      ...options
-    });
-  }
-  version = pkg.version;
-  get focusable() {
-    return false;
-  }
-}
-export const getReactEventHandler = ($element, handlerName) => {
-  for (const key in $element) {
-    if (key.startsWith('__reactProps$')) {
-      return $element[key][handlerName];
-    }
-  }
-  return null;
-};
-export const updateExplicitBooleanAttribute = ($element, attrName, attrValue) => {
-  $element.setAttribute(attrName, attrValue === true ? 'true' : 'false');
-};
-export const isAttrTrue = attrValue => {
-  return attrValue === '' || attrValue !== 'false' && attrValue !== null;
-};
-export const getBooleanAttribute = ($element, attrName) => {
-  return isAttrTrue($element.getAttribute(attrName));
-};
-export const updateBooleanAttribute = ($element, attrName, attrValue) => {
-  const currentAttrValue = $element.getAttribute(attrName);
-  if (attrValue === true) {
-    if (!isAttrTrue(currentAttrValue)) {
-      $element.setAttribute(attrName, '');
-    }
-  } else if (currentAttrValue !== null) {
-    $element.removeAttribute(attrName);
-  }
-};
-export const updateAttribute = ($element, attrName, attrValue) => {
-  if (attrValue != null) {
-    $element.setAttribute(attrName, String(attrValue));
-  } else {
-    $element.removeAttribute(attrName);
-  }
-};
-export function getAttribute($element, attrName) {
-  let defaultValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-  return $element.getAttribute(attrName) ?? defaultValue;
-}
-export const isLiteralValue = (literals, value) => {
-  return value != null && literals.includes(value);
-};
-export const updateLiteralAttribute = ($element, literals, attrName, attrValue) => {
-  if (isLiteralValue(literals, attrValue)) {
-    $element.setAttribute(attrName, attrValue);
-  } else {
-    $element.removeAttribute(attrName);
-  }
-};
-export function getLiteralAttribute($element, literals, attrName, defaultValue) {
-  const attrValue = $element.getAttribute(attrName);
-  if (isLiteralValue(literals, attrValue)) {
-    return attrValue;
-  }
-  if (typeof defaultValue === 'undefined') {
-    throw new Error(`Invalid attribute value: ${attrName} = ${attrValue}`);
-  }
-  return defaultValue;
-}
-export const clampNumber = (value, min, max) => {
-  return Math.min(max, Math.max(min, value));
-};
-const DEFAULT_INTEGER_OPTIONS = {
-  itemSizeMultiplier: 1,
-  itemSpaceBetween: 0,
-  defaultValue: null
-};
-const applyRange = (value, _ref) => {
-  let {
-    min,
-    max
-  } = _ref;
-  let result = value;
-  if (min != null) {
-    result = Math.max(min, result);
-  }
-  if (max != null) {
-    result = Math.min(max, result);
-  }
-  return result;
-};
-export const attrValueToInteger = function (value) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_INTEGER_OPTIONS;
-  const {
-    defaultValue = null,
-    itemSizeMultiplier = 1,
-    itemSpaceBetween = 0
-  } = options;
-  let intValue = defaultValue;
-  if (value !== null) {
-    const int = parseInt(value);
-    if (Number.isInteger(int)) {
-      intValue = applyRange(int, options);
-    }
-  }
-  if (intValue !== null) {
-    return intValue * itemSizeMultiplier + Math.max(intValue - 1, 0) * itemSpaceBetween;
-  }
-  return null;
-};
-export const attrValueToPixels = function (value) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_INTEGER_OPTIONS;
-  const int = attrValueToInteger(value, options);
-  return int === null ? 'unset' : `${int}px`;
-};
-export const updateIntegerAttribute = function ($element, attrName, attrValue) {
-  let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : DEFAULT_INTEGER_OPTIONS;
-  const {
-    defaultValue = null,
-    itemSizeMultiplier: multiplier = 1
-  } = options;
-  let intValue = null;
-  if (typeof attrValue === 'string') {
-    intValue = attrValueToInteger(attrValue, options);
-  } else if (typeof attrValue === 'number') {
-    intValue = applyRange(attrValue, options) * multiplier;
-  } else {
-    intValue = defaultValue;
-  }
-  if (intValue === null) {
-    $element.removeAttribute(attrName);
-  } else {
-    $element.setAttribute(attrName, intValue.toFixed(0));
-  }
-};
-export function getIntegerAttribute($element, attrName, defaultValue) {
-  return attrValueToInteger($element.getAttribute(attrName)) ?? defaultValue;
-}
-const unpackCsv = csv => {
-  return csv === '' ? [] : csv.split(',');
-};
-const packCsv = values => {
-  return Array.from(values).join(',');
-};
-export const getCsvSet = acc => {
-  return new Set(unpackCsv(acc));
-};
-export const updateCsv = (acc, value, setActive) => {
-  const values = getCsvSet(acc);
-  if (setActive) {
-    values.add(value);
-  } else {
-    values.delete(value);
-  }
-  return packCsv(values);
-};
-export const getFirstCsvValue = acc => {
-  return acc === '' ? null : unpackCsv(acc)[0];
-};
-export const getRect = el => {
-  const {
-    x,
-    y,
-    width,
-    height
-  } = el.getBoundingClientRect();
-  return {
-    x,
-    y,
-    width,
-    height
-  };
-};
-export const setClass = (elem, name, isSet) => {
-  isSet ? elem.classList.add(name) : elem.classList.remove(name);
-};
-export const getCssVar = (element, variableName) => {
-  const result = getComputedStyle(element).getPropertyValue(variableName);
-  return result === '' ? null : result;
-};
-const throttle = (delayFn, cancelFn) => cb => {
-  let id = null;
-  let fnArgs;
-  const delayCallback = () => {
-    id = null;
-    cb(fnArgs);
-  };
-  return {
-    fn: function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      fnArgs = args;
-      if (id === null) {
-        id = delayFn(delayCallback);
-      }
-    },
-    cancel: () => {
-      if (id !== null) {
-        cancelFn(id);
-      }
-    }
-  };
-};
-export const throttleAnimationFrame = throttle(global.requestAnimationFrame, global.cancelAnimationFrame);
-const isSlotElement = el => {
-  return el.tagName === 'SLOT';
-};
-export const getFirstSlotElement = function (root) {
-  let isDeep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  const el = root.assignedElements()[0];
-  if (el == null) {
-    return null;
-  }
-  if (isDeep && isSlotElement(el)) {
-    return getFirstSlotElement(el, isDeep);
-  }
-  return el;
-};
-const getChildren = root => {
-  if (isSlotElement(root)) {
-    return root.assignedElements();
-  }
-  return Array.from(root.children);
-};
-const isFocusable = el => {
-  return el.focusable === true;
-};
-export const getFirstFocusableElement = root => {
-  for (const child of getChildren(root)) {
-    if (isFocusable(child)) {
-      return child;
-    }
-    const resultEl = getFirstFocusableElement(child);
-    if (resultEl !== null) {
-      return resultEl;
-    }
-  }
-  return null;
-};
-export const cloneNode = (el, deep) => {
-  const root = el.getRootNode();
-  if (root !== document && Reflect.has(root, 'createElement')) {
-    const cloned = root.createElement(el.tagName.toLowerCase());
-    for (const attr of el.getAttributeNames()) {
-      cloned.setAttribute(attr, el.getAttribute(attr));
-    }
-    if (deep) {
-      for (let i = 0; i < el.children.length; i++) {
-        const clonedChild = cloneNode(el.children[i], deep);
-        cloned.appendChild(clonedChild);
-      }
-    }
-    return cloned;
-  }
-  return el.cloneNode(deep);
-};
-export const isElementFocused = $el => {
-  return $el !== null && $el === $el.getRootNode().activeElement;
-};
-export const rectOverlap = (targetRect, contentRect) => {
-  return targetRect.x < contentRect.x + contentRect.width && targetRect.x + targetRect.width > contentRect.x && targetRect.y < contentRect.y + contentRect.height && targetRect.y + targetRect.height > contentRect.y;
-};
-
-export const getTargetRect = slot => {
-  const item = getFirstSlotElement(slot, true);
-  if (item === null) {
-    return null;
-  }
-  if (Reflect.has(item, 'footprintRect')) {
-    return item.footprintRect;
-  }
-  return getRect(item);
-};
+export * from './context';
+export * from './csv';
+export * from './dom';
+export * from './element';
+export * from './rect';
+export * from './slot';
+export * from './throttle';
+export * from './get-react-event-handler';

package/utils/rect.d.ts

@@ -0,0 +1,4 @@
+import type { TRect } from '../types';
+export declare const getRect: (el: Element) => TRect;
+export declare const rectOverlap: (targetRect: TRect, contentRect: TRect) => boolean;
+export declare const getTargetRect: (slot: HTMLSlotElement) => TRect | null;

package/utils/rect.js

@@ -0,0 +1,29 @@
+import { getFirstSlotElement } from './slot';
+export const getRect = el => {
+  const {
+    x,
+    y,
+    width,
+    height
+  } = el.getBoundingClientRect();
+  return {
+    x,
+    y,
+    width,
+    height
+  };
+};
+export const rectOverlap = (targetRect, contentRect) => {
+  return targetRect.x < contentRect.x + contentRect.width && targetRect.x + targetRect.width > contentRect.x && targetRect.y < contentRect.y + contentRect.height && targetRect.y + targetRect.height > contentRect.y;
+};
+
+export const getTargetRect = slot => {
+  const item = getFirstSlotElement(slot, true);
+  if (item === null) {
+    return null;
+  }
+  if (Reflect.has(item, 'footprintRect')) {
+    return item.footprintRect;
+  }
+  return getRect(item);
+};

package/utils/slot.d.ts

@@ -0,0 +1,4 @@
+import type { NectaryElement } from './element';
+export declare const getFirstSlotElement: (root: HTMLSlotElement, isDeep?: boolean) => HTMLElement | null;
+export declare const getFirstFocusableElement: (root: Element) => NectaryElement | null;
+export declare const isElementFocused: ($el: Element | null) => boolean;

package/utils/slot.js

@@ -0,0 +1,38 @@
+const isSlotElement = el => {
+  return el.tagName === 'SLOT';
+};
+export const getFirstSlotElement = function (root) {
+  let isDeep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const el = root.assignedElements()[0];
+  if (el == null) {
+    return null;
+  }
+  if (isDeep && isSlotElement(el)) {
+    return getFirstSlotElement(el, isDeep);
+  }
+  return el;
+};
+const getChildren = root => {
+  if (isSlotElement(root)) {
+    return root.assignedElements();
+  }
+  return Array.from(root.children);
+};
+const isFocusable = el => {
+  return el.focusable === true;
+};
+export const getFirstFocusableElement = root => {
+  for (const child of getChildren(root)) {
+    if (isFocusable(child)) {
+      return child;
+    }
+    const resultEl = getFirstFocusableElement(child);
+    if (resultEl !== null) {
+      return resultEl;
+    }
+  }
+  return null;
+};
+export const isElementFocused = $el => {
+  return $el !== null && $el === $el.getRootNode().activeElement;
+};

package/utils/throttle.d.ts

@@ -0,0 +1,4 @@
+export declare const throttleAnimationFrame: (cb: (...args: any[]) => void) => {
+    fn: (...args: any[]) => void;
+    cancel: () => void;
+};

package/utils/throttle.js

@@ -0,0 +1,25 @@
+const throttle = (delayFn, cancelFn) => cb => {
+  let id = null;
+  let fnArgs;
+  const delayCallback = () => {
+    id = null;
+    cb(fnArgs);
+  };
+  return {
+    fn: function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      fnArgs = args;
+      if (id === null) {
+        id = delayFn(delayCallback);
+      }
+    },
+    cancel: () => {
+      if (id !== null) {
+        cancelFn(id);
+      }
+    }
+  };
+};
+export const throttleAnimationFrame = throttle(global.requestAnimationFrame, global.cancelAnimationFrame);