@nectary/components 0.42.0 → 0.43.0

package/utils/dom.js

@@ -0,0 +1,143 @@
+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;
+}
+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;
+};
+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);
+};

package/utils/element.d.ts

@@ -0,0 +1,12 @@
+export declare const defineCustomElement: (name: string, constructor: CustomElementConstructor) => void;
+export declare const setNectaryRegistry: (registry: CustomElementRegistry) => void;
+declare global {
+    interface ShadowRootInit {
+        customElements?: CustomElementRegistry;
+    }
+}
+export declare class NectaryElement extends HTMLElement {
+    attachShadow(options?: Partial<ShadowRootInit>): ShadowRoot;
+    version: string;
+    get focusable(): boolean;
+}

package/utils/element.js

@@ -0,0 +1,38 @@
+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;
+  }
+}

package/utils/get-react-event-handler.d.ts

@@ -0,0 +1 @@
+export declare const getReactEventHandler: ($element: HTMLElement, handlerName: string) => ((arg?: any) => void) | null;

package/utils/get-react-event-handler.js

@@ -0,0 +1,8 @@
+export const getReactEventHandler = ($element, handlerName) => {
+  for (const key in $element) {
+    if (key.startsWith('__reactProps$')) {
+      return $element[key][handlerName];
+    }
+  }
+  return null;
+};

package/utils/index.d.ts

@@ -1,57 +1,8 @@
-import type { TRect } from '../types';
-export declare const defineCustomElement: (name: string, constructor: CustomElementConstructor) => void;
-export declare const setNectaryRegistry: (registry: CustomElementRegistry) => void;
-declare global {
-    interface ShadowRootInit {
-        customElements?: CustomElementRegistry;
-    }
-}
-export declare class NectaryElement extends HTMLElement {
-    attachShadow(options?: Partial<ShadowRootInit>): ShadowRoot;
-    version: string;
-    get focusable(): boolean;
-}
-export declare const getReactEventHandler: ($element: HTMLElement, handlerName: string) => ((arg?: any) => void) | null;
-export declare const updateExplicitBooleanAttribute: ($element: Element, attrName: string, attrValue: boolean | null | undefined) => void;
-export declare const isAttrTrue: (attrValue: string | null) => boolean;
-export declare const getBooleanAttribute: ($element: Element, attrName: string) => boolean;
-export declare const updateBooleanAttribute: ($element: Element, attrName: string, attrValue: boolean | null | undefined) => void;
-export declare const updateAttribute: ($element: Element, attrName: string, attrValue: string | number | boolean | null | undefined) => void;
-export declare function getAttribute($element: Element, attrName: string): string | null;
-export declare function getAttribute($element: Element, attrName: string, defaultValue: string): string;
-export declare const isLiteralValue: <T extends readonly string[]>(literals: T, value: string | null | undefined) => value is T[number];
-export declare const updateLiteralAttribute: <T extends readonly string[]>($element: Element, literals: T, attrName: string, attrValue: string | null | undefined) => void;
-export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string): T[number];
-export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: null): T[number] | null;
-export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: T[number]): T[number];
-export declare const clampNumber: (value: number, min: number, max: number) => number;
-declare type IntegerOptions = {
-    min?: number;
-    max?: number;
-    defaultValue?: number | null;
-    itemSizeMultiplier?: number;
-    itemSpaceBetween?: number;
-};
-export declare const attrValueToInteger: (value: string | null, options?: IntegerOptions) => number | null;
-export declare const attrValueToPixels: (value: string | null, options?: IntegerOptions) => string;
-export declare const updateIntegerAttribute: ($element: Element, attrName: string, attrValue: string | number | null | undefined, options?: IntegerOptions) => void;
-export declare function getIntegerAttribute($element: Element, attrName: string): number | undefined;
-export declare function getIntegerAttribute($element: Element, attrName: string, defaultValue: null): number | null;
-export declare function getIntegerAttribute($element: Element, attrName: string, defaultValue: number): number;
-export declare const getCsvSet: (acc: string) => Set<string>;
-export declare const updateCsv: (acc: string, value: string, setActive: boolean) => string;
-export declare const getFirstCsvValue: (acc: string) => string | null;
-export declare const getRect: (el: Element) => TRect;
-export declare const setClass: (elem: Element, name: string, isSet: boolean) => void;
-export declare const getCssVar: (element: Element, variableName: string) => string | null;
-export declare const throttleAnimationFrame: (cb: (...args: any[]) => void) => {
-    fn: (...args: any[]) => void;
-    cancel: () => void;
-};
-export declare const getFirstSlotElement: (root: HTMLSlotElement, isDeep?: boolean) => HTMLElement | null;
-export declare const getFirstFocusableElement: (root: Element) => NectaryElement | null;
-export declare const cloneNode: (el: Element, deep: boolean) => Element;
-export declare const isElementFocused: ($el: Element | null) => boolean;
-export declare const rectOverlap: (targetRect: TRect, contentRect: TRect) => boolean;
-export declare const getTargetRect: (slot: HTMLSlotElement) => TRect | null;
-export {};
+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/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;
+};