@nectary/components 4.12.0 → 4.12.1

package/utils/debounce.js

@@ -1,4 +1,4 @@
-const createDebounce = (delayFn, cancelFn) => (cb) => {
+const createDebounce = (delayFn, cancelFn) => cb => {
   let id = null;
   const delayCallback = () => {
     id = null;
@@ -18,12 +18,5 @@ const createDebounce = (delayFn, cancelFn) => (cb) => {
     }
   };
 };
-const debounceTimeout = (ms) => createDebounce(
-  (cb) => globalThis.setTimeout(cb, ms),
-  globalThis.clearTimeout
-);
-const debounceAnimationFrame = createDebounce(globalThis.requestAnimationFrame, globalThis.cancelAnimationFrame);
-export {
-  debounceAnimationFrame,
-  debounceTimeout
-};
+export const debounceTimeout = ms => createDebounce(cb => globalThis.setTimeout(cb, ms), globalThis.clearTimeout);
+export const debounceAnimationFrame = createDebounce(globalThis.requestAnimationFrame, globalThis.cancelAnimationFrame);

package/utils/dom.js

@@ -1,50 +1,51 @@
-const updateExplicitBooleanAttribute = ($element, attrName, attrValue) => {
-  $element.setAttribute(attrName, attrValue === true ? "true" : "false");
+export const updateExplicitBooleanAttribute = ($element, attrName, attrValue) => {
+  $element.setAttribute(attrName, attrValue === true ? 'true' : 'false');
 };
-const isAttrTrue = (attrValue) => {
-  return attrValue !== null && attrValue !== "false";
+export const isAttrTrue = attrValue => {
+  return attrValue !== null && attrValue !== 'false';
 };
-const getBooleanAttribute = ($element, attrName) => {
+export const getBooleanAttribute = ($element, attrName) => {
   return isAttrTrue($element.getAttribute(attrName));
 };
-const updateBooleanAttribute = ($element, attrName, attrValue) => {
+export const updateBooleanAttribute = ($element, attrName, attrValue) => {
   const currentAttrValue = $element.getAttribute(attrName);
   if (attrValue === true) {
     if (!isAttrTrue(currentAttrValue)) {
-      $element.setAttribute(attrName, "");
+      $element.setAttribute(attrName, '');
     }
   } else if (currentAttrValue !== null) {
     $element.removeAttribute(attrName);
   }
 };
-const updateAttribute = ($element, attrName, attrValue) => {
+export const updateAttribute = ($element, attrName, attrValue) => {
   if (attrValue != null) {
     $element.setAttribute(attrName, String(attrValue));
   } else {
     $element.removeAttribute(attrName);
   }
 };
-function getAttribute($element, attrName, defaultValue = null) {
+export function getAttribute($element, attrName) {
+  let defaultValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   return $element.getAttribute(attrName) ?? defaultValue;
 }
-const isLiteralValue = (literals, value) => {
+export const isLiteralValue = (literals, value) => {
   return value != null && literals.includes(value);
 };
-const updateLiteralAttribute = ($element, literals, attrName, attrValue) => {
+export const updateLiteralAttribute = ($element, literals, attrName, attrValue) => {
   if (isLiteralValue(literals, attrValue)) {
     $element.setAttribute(attrName, attrValue);
   } else {
     $element.removeAttribute(attrName);
   }
 };
-function getLiteralAttribute($element, literals, attrName, defaultValue) {
+export function getLiteralAttribute($element, literals, attrName, defaultValue) {
   const attrValue = $element.getAttribute(attrName);
   if (isLiteralValue(literals, attrValue)) {
     return attrValue;
   }
   return defaultValue;
 }
-const clampNumber = (value, min, max) => {
+export const clampNumber = (value, min, max) => {
   return Math.min(max, Math.max(min, value));
 };
 const DEFAULT_INTEGER_OPTIONS = {
@@ -52,7 +53,11 @@ const DEFAULT_INTEGER_OPTIONS = {
   itemSpaceBetween: 0,
   defaultValue: null
 };
-const applyRange = (value, { min, max }) => {
+const applyRange = (value, _ref) => {
+  let {
+    min,
+    max
+  } = _ref;
   let result = value;
   if (min != null) {
     result = Math.max(min, result);
@@ -62,8 +67,14 @@ const applyRange = (value, { min, max }) => {
   }
   return result;
 };
-const attrValueToInteger = (value, options = DEFAULT_INTEGER_OPTIONS) => {
-  const { defaultValue = null, itemSizeMultiplier = 1, itemSpaceBetween = 0, addExtraSpace = false } = options;
+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,
+    addExtraSpace = false
+  } = options;
   let intValue = defaultValue;
   if (value !== null) {
     const int = parseInt(value);
@@ -76,16 +87,21 @@ const attrValueToInteger = (value, options = DEFAULT_INTEGER_OPTIONS) => {
   }
   return null;
 };
-const attrValueToPixels = (value, options = DEFAULT_INTEGER_OPTIONS) => {
+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`;
-};
-const updateIntegerAttribute = ($element, attrName, attrValue, options = DEFAULT_INTEGER_OPTIONS) => {
-  const { defaultValue = null, itemSizeMultiplier: multiplier = 1 } = 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") {
+  if (typeof attrValue === 'string') {
     intValue = attrValueToInteger(attrValue, options);
-  } else if (typeof attrValue === "number") {
+  } else if (typeof attrValue === 'number') {
     intValue = applyRange(attrValue, options) * multiplier;
   } else {
     intValue = defaultValue;
@@ -96,29 +112,29 @@ const updateIntegerAttribute = ($element, attrName, attrValue, options = DEFAULT
     $element.setAttribute(attrName, intValue.toFixed(0));
   }
 };
-function getIntegerAttribute($element, attrName, defaultValue) {
+export function getIntegerAttribute($element, attrName, defaultValue) {
   return attrValueToInteger($element.getAttribute(attrName)) ?? defaultValue;
 }
-const setClass = (elem, name, isSet) => {
+export const setClass = (elem, name, isSet) => {
   isSet ? elem.classList.add(name) : elem.classList.remove(name);
 };
-const hasClass = (elem, name) => {
+export const hasClass = (elem, name) => {
   return elem.classList.contains(name);
 };
-const getCssVar = (element, variableName) => {
+export const getCssVar = (element, variableName) => {
   const result = getComputedStyle(element).getPropertyValue(variableName).trim();
-  return result === "" ? null : result;
+  return result === '' ? null : result;
 };
-const getCssVars = (element, variableNames) => {
+export const getCssVars = (element, variableNames) => {
   const style = getComputedStyle(element);
-  return variableNames.map((name) => {
+  return variableNames.map(name => {
     const result = style.getPropertyValue(name).trim();
-    return result === "" ? null : result;
+    return result === '' ? null : result;
   });
 };
-const cloneNode = (el, deep) => {
+export const cloneNode = (el, deep) => {
   const root = el.getRootNode();
-  if (root !== document && Reflect.has(root, "createElement")) {
+  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));
@@ -133,30 +149,7 @@ const cloneNode = (el, deep) => {
   }
   return el.cloneNode(deep);
 };
-const shouldReduceMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-const isAttrEqual = (oldVal, newVal) => {
-  return oldVal === newVal || newVal === null && oldVal === "false" || newVal === "" && oldVal === "true";
-};
-export {
-  attrValueToInteger,
-  attrValueToPixels,
-  clampNumber,
-  cloneNode,
-  getAttribute,
-  getBooleanAttribute,
-  getCssVar,
-  getCssVars,
-  getIntegerAttribute,
-  getLiteralAttribute,
-  hasClass,
-  isAttrEqual,
-  isAttrTrue,
-  isLiteralValue,
-  setClass,
-  shouldReduceMotion,
-  updateAttribute,
-  updateBooleanAttribute,
-  updateExplicitBooleanAttribute,
-  updateIntegerAttribute,
-  updateLiteralAttribute
-};
+export const shouldReduceMotion = () => window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+export const isAttrEqual = (oldVal, newVal) => {
+  return oldVal === newVal || newVal === null && oldVal === 'false' || newVal === '' && oldVal === 'true';
+};

package/utils/element.d.ts

@@ -1,109 +1,17 @@
-// Generated by dts-bundle-generator v9.5.1
-
-export type SinchElementName = `sinch-${string}`;
-declare class NectaryElementBase extends HTMLElement {
-	private static _isGlobal;
-	static get elementName(): SinchElementName;
-	static get isGlobal(): boolean;
-	static set isGlobal(value: boolean);
-}
-declare const BASE_COMPONENT_NAMES_LIST: readonly [
-	"accordion-item",
-	"accordion",
-	"action-menu-option",
-	"action-menu",
-	"alert",
-	"avatar",
-	"badge",
-	"button-group-item",
-	"button-group",
-	"button",
-	"card-container",
-	"card-v2-title",
-	"card-v2",
-	"checkbox",
-	"chip",
-	"code-tag",
-	"color-menu-option",
-	"color-menu",
-	"color-swatch",
-	"date-picker",
-	"dialog",
-	"emoji-picker",
-	"emoji",
-	"field",
-	"file-drop",
-	"file-picker",
-	"file-status",
-	"flag",
-	"grid-item",
-	"grid",
-	"help-tooltip",
-	"icon",
-	"inline-alert",
-	"input",
-	"link",
-	"list-item",
-	"list",
-	"pagination",
-	"persistent-overlay",
-	"pop",
-	"popover",
-	"progress-stepper-item",
-	"progress-stepper",
-	"progress",
-	"radio-option",
-	"radio",
-	"rich-text",
-	"rich-textarea",
-	"segment-collapse",
-	"segmented-control-option",
-	"segmented-control",
-	"segmented-icon-control-option",
-	"segmented-icon-control",
-	"select-button",
-	"select-menu-option",
-	"select-menu",
-	"skeleton-item",
-	"skeleton",
-	"spinner",
-	"stop-events",
-	"table-body",
-	"table-cell",
-	"table-head-cell",
-	"table-head",
-	"table-row",
-	"table",
-	"tabs-icon-option",
-	"tabs-option",
-	"tabs",
-	"tag",
-	"text",
-	"textarea",
-	"time-picker",
-	"title",
-	"toast-manager",
-	"toast",
-	"toggle",
-	"tooltip"
-];
-export type ComponentName = `sinch-${typeof BASE_COMPONENT_NAMES_LIST[number]}`;
-export declare const pascalToKebabCase: (str: string) => string;
-export declare const registerComponent: (name: ComponentName, constructor: CustomElementConstructor) => void;
-export declare const defineCustomElement: (name: ComponentName, constructor?: CustomElementConstructor) => Promise<void>;
-export interface SetNectaryRegistryOptions {
-	manualRegistration?: boolean;
-}
-export declare const setNectaryRegistry: (registry?: CustomElementRegistry, options?: SetNectaryRegistryOptions) => void;
+export declare const defineCustomElement: (name: string, constructor: CustomElementConstructor) => void;
+export declare const setNectaryRegistry: (registry: CustomElementRegistry) => void;
 export declare const resetNectaryRegistry: () => void;
-export declare class NectaryElement extends NectaryElementBase {
-	#private;
-	attachShadow(options?: Partial<ShadowRootInit>): ShadowRoot;
-	version: string;
-	get focusable(): boolean;
-	connectedCallback(): void;
-	disconnectedCallback(): void;
-	get isDomConnected(): boolean;
+declare global {
+    interface ShadowRootInit {
+        customElements?: CustomElementRegistry;
+    }
+}
+export declare class NectaryElement extends HTMLElement {
+    #private;
+    attachShadow(options?: Partial<ShadowRootInit>): ShadowRoot;
+    version: string;
+    get focusable(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    get isDomConnected(): boolean;
 }
-
-export {};

package/utils/element.js

@@ -1,113 +1,40 @@
-import { NectaryElementBase, sinchElementNameToBase } from "./shared/nectary-element-base.js";
-import { getConstructor } from "./shared/global-elements-store.js";
-import { COMPONENTS_STORE_KEY } from "./global-components-constants.js";
-const version = "5.0.0";
-const pkg = {
-  version
-};
-const nectaryDefinitions = /* @__PURE__ */ new Map();
+import pkg from '../package.json';
+const nectaryDefinitions = new Map();
 let nectaryRegistry = null;
-let manualRegistration = false;
-const getGlobalConstructor = (name) => {
-  return getConstructor(COMPONENTS_STORE_KEY, name);
-};
-const pascalToKebabCase = (str) => {
-  return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").toLowerCase();
-};
-const safeDefine = (registry, name, constructor) => {
-  if (registry.get(name) != null) {
-    return;
-  }
-  registry.define(name, constructor);
-};
-const registerComponent = (name, constructor) => {
-  if (nectaryRegistry === window.customElements) {
-    throw new Error("Registering components on the global registry is not allowed. Please set a scoped registry with setNectaryRegistry() first.");
-  }
-  if (nectaryRegistry == null) {
-    throw new Error("Nectary registry is not set. Please set a scoped registry with setNectaryRegistry() first.");
-  }
-  safeDefine(nectaryRegistry, name, constructor);
-};
-const defineCustomElement = async (name, constructor) => {
-  if (manualRegistration) {
+export const defineCustomElement = (name, constructor) => {
+  if (nectaryRegistry !== null) {
+    if (nectaryRegistry.get(name) == null) {
+      nectaryRegistry.define(name, constructor);
+    }
     return;
   }
   nectaryDefinitions.set(name, constructor);
-  if (nectaryRegistry == null) {
-    return;
-  }
-  if (nectaryRegistry === window.customElements) {
-    const globalConstructor = await getGlobalConstructor(name);
-    if (globalConstructor !== null) {
-      safeDefine(nectaryRegistry, name, globalConstructor);
-      return;
-    }
-  }
-  if (constructor != null) {
-    safeDefine(nectaryRegistry, name, constructor);
-  }
 };
-const processDefinitionsForRegistry = (registry) => {
-  const globalConstructorPromises = [];
+export const setNectaryRegistry = registry => {
+  if (nectaryRegistry !== null) {
+    throw new Error('Nectary registry already set');
+  }
+  nectaryRegistry = registry;
   for (const [name, ctor] of nectaryDefinitions.entries()) {
-    if (registry === window.customElements) {
-      const globalConstructorPromise = getGlobalConstructor(name);
-      if (globalConstructorPromise !== null) {
-        const resolvePromise = globalConstructorPromise.then((globalCtor) => {
-          safeDefine(registry, name, globalCtor);
-        });
-        globalConstructorPromises.push(resolvePromise);
-        continue;
-      }
-    }
-    if (ctor == null) {
-      throw new Error(
-        `Could not find constructor for ${name}.
-
-        Please make sure to omit '/global' when importing your component: import '@nectary/components/${sinchElementNameToBase(name)}'
-
-        If you intend to use global components, make sure to set the registry with the global registry: setNectaryRegistry(window.customElements).`
-      );
+    if (nectaryRegistry.get(name) == null) {
+      nectaryRegistry.define(name, ctor);
     }
-    safeDefine(registry, name, ctor);
   }
   nectaryDefinitions.clear();
-  return globalConstructorPromises;
 };
-const setNectaryRegistry = (registry = window.customElements, options = {}) => {
-  manualRegistration = options.manualRegistration ?? false;
-  if (nectaryRegistry != null) {
-    if (nectaryRegistry === window.customElements) {
-      return;
-    }
-    throw new Error("Nectary registry already set");
-  }
-  nectaryRegistry = registry;
-  if (manualRegistration) {
-    nectaryDefinitions.clear();
-    return;
-  }
-  const globalConstructorPromises = processDefinitionsForRegistry(registry);
-  if (globalConstructorPromises.length > 0) {
-    Promise.all(globalConstructorPromises).catch((error) => {
-      console.error("Error while registering global components", error);
-    });
-  }
-};
-const resetNectaryRegistry = () => {
+export const resetNectaryRegistry = () => {
   nectaryRegistry = null;
 };
-class NectaryElement extends NectaryElementBase {
+export class NectaryElement extends HTMLElement {
   attachShadow(options) {
     return super.attachShadow({
-      mode: "open",
+      mode: 'open',
       delegatesFocus: false,
       customElements: nectaryRegistry,
       ...options
     });
   }
-  version = pkg.version;
+  version = (() => pkg.version)();
   get focusable() {
     return false;
   }
@@ -121,12 +48,4 @@ class NectaryElement extends NectaryElementBase {
   get isDomConnected() {
     return this.#isDomConnected;
   }
-}
-export {
-  NectaryElement,
-  defineCustomElement,
-  pascalToKebabCase,
-  registerComponent,
-  resetNectaryRegistry,
-  setNectaryRegistry
-};
+}

package/utils/event-target.js

@@ -1,7 +1,7 @@
-const isTargetEqual = (e, $elem) => {
+export const isTargetEqual = (e, $elem) => {
   return e.target === $elem || e.originalTarget === $elem;
 };
-const getTargetByAttribute = (e, attr) => {
+export const getTargetByAttribute = (e, attr) => {
   if (e.target.hasAttribute(attr)) {
     return e.target;
   }
@@ -10,10 +10,10 @@ const getTargetByAttribute = (e, attr) => {
   }
   return null;
 };
-const getTargetAttribute = (e, attr) => {
+export const getTargetAttribute = (e, attr) => {
   return e.target.getAttribute(attr) ?? e.originalTarget?.getAttribute(attr) ?? null;
 };
-const getTargetIndexInParent = (e, parent) => {
+export const getTargetIndexInParent = (e, parent) => {
   const indexOf = Array.prototype.indexOf.call(parent.children, e.target);
   if (indexOf >= 0) {
     return indexOf;
@@ -23,10 +23,4 @@ const getTargetIndexInParent = (e, parent) => {
     return Array.prototype.indexOf.call(parent.children, origTgt);
   }
   return -1;
-};
-export {
-  getTargetAttribute,
-  getTargetByAttribute,
-  getTargetIndexInParent,
-  isTargetEqual
-};
+};

package/utils/form.js

@@ -1,20 +1,20 @@
-const setFormValue = (internals, value) => {
-  let formValue = value ?? "";
+export const setFormValue = (internals, value) => {
+  let formValue = value ?? '';
   if (formValue instanceof FormData && [...formValue.keys()].length === 0) {
-    formValue = "";
+    formValue = '';
   }
   if (formValue instanceof File && formValue.size === 0) {
-    formValue = "";
+    formValue = '';
   }
   if (internals.form !== null) {
     internals.setFormValue(formValue);
   }
 };
-const requestSubmitForm = (form, submitter) => {
-  const submitterProxy = document.createElement("button");
-  submitterProxy.style.display = "none";
+export const requestSubmitForm = (form, submitter) => {
+  const submitterProxy = document.createElement('button');
+  submitterProxy.style.display = 'none';
   submitterProxy.type = submitter.formType;
-  Array.from(submitter.attributes).filter((attr) => attr.name.startsWith("aria-")).forEach((attr) => {
+  Array.from(submitter.attributes).filter(attr => attr.name.startsWith('aria-')).forEach(attr => {
     submitterProxy.setAttribute(attr.name, attr.value);
   });
   form.appendChild(submitterProxy);
@@ -24,18 +24,13 @@ const requestSubmitForm = (form, submitter) => {
     form.removeChild(submitterProxy);
   }
 };
-const CSVToFormData = (name, csv) => {
+export const CSVToFormData = (name, csv) => {
   if (csv.length === 0) {
-    return "";
+    return '';
   }
   const formData = new FormData();
-  csv.split(",").forEach((value) => {
+  csv.split(',').forEach(value => {
     formData.append(name, value);
   });
   return formData;
-};
-export {
-  CSVToFormData,
-  requestSubmitForm,
-  setFormValue
-};
+};

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

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

package/utils/index.js

@@ -1,65 +1,12 @@
-import { Context, subscribeContext } from "./context.js";
-import { CSV_DELIMITER, getFirstCsvValue, packCsv, unpackCsv, updateCsv } from "./csv.js";
-import { attrValueToInteger, attrValueToPixels, clampNumber, cloneNode, getAttribute, getBooleanAttribute, getCssVar, getCssVars, getIntegerAttribute, getLiteralAttribute, hasClass, isAttrEqual, isAttrTrue, isLiteralValue, setClass, shouldReduceMotion, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute, updateLiteralAttribute } from "./dom.js";
-import { NectaryElement, defineCustomElement, pascalToKebabCase, registerComponent, resetNectaryRegistry, setNectaryRegistry } from "./element.js";
-import { getRect, getTargetRect, rectOverlap } from "./rect.js";
-import { getFirstFocusableElement, getFirstSlotElement, isElementFocused } from "./slot.js";
-import { throttleAnimationFrame } from "./throttle.js";
-import { debounceAnimationFrame, debounceTimeout } from "./debounce.js";
-import { getReactEventHandler } from "./get-react-event-handler.js";
-import { isEmojiString, parseMarkdown } from "./markdown.js";
-import { getTargetAttribute, getTargetByAttribute, getTargetIndexInParent, isTargetEqual } from "./event-target.js";
-import { getUid } from "./uid.js";
-export {
-  CSV_DELIMITER,
-  Context,
-  NectaryElement,
-  attrValueToInteger,
-  attrValueToPixels,
-  clampNumber,
-  cloneNode,
-  debounceAnimationFrame,
-  debounceTimeout,
-  defineCustomElement,
-  getAttribute,
-  getBooleanAttribute,
-  getCssVar,
-  getCssVars,
-  getFirstCsvValue,
-  getFirstFocusableElement,
-  getFirstSlotElement,
-  getIntegerAttribute,
-  getLiteralAttribute,
-  getReactEventHandler,
-  getRect,
-  getTargetAttribute,
-  getTargetByAttribute,
-  getTargetIndexInParent,
-  getTargetRect,
-  getUid,
-  hasClass,
-  isAttrEqual,
-  isAttrTrue,
-  isElementFocused,
-  isEmojiString,
-  isLiteralValue,
-  isTargetEqual,
-  packCsv,
-  parseMarkdown,
-  pascalToKebabCase,
-  rectOverlap,
-  registerComponent,
-  resetNectaryRegistry,
-  setClass,
-  setNectaryRegistry,
-  shouldReduceMotion,
-  subscribeContext,
-  throttleAnimationFrame,
-  unpackCsv,
-  updateAttribute,
-  updateBooleanAttribute,
-  updateCsv,
-  updateExplicitBooleanAttribute,
-  updateIntegerAttribute,
-  updateLiteralAttribute
-};
+export * from './context';
+export * from './csv';
+export * from './dom';
+export * from './element';
+export * from './rect';
+export * from './slot';
+export * from './throttle';
+export * from './debounce';
+export * from './get-react-event-handler';
+export * from './markdown';
+export * from './event-target';
+export * from './uid';