nexus-shared 1.1.4 → 1.1.6

package/src/components/inputs/number-input.tsx

@@ -0,0 +1,108 @@
+import { GetInputId, SetHaveValueClass } from "../../helpers/input-helpers";
+import { IsNullOrEmpty } from "../../helpers/string-helpers";
+import { IInputCreateResults, INumber } from "../../interfaces/input-interfaces";
+import { CreateInput } from "./input";
+import { CreateInputBox, CreateInputWrapper } from "./input-box";
+
+function getDecimalPlaces(param: INumber): number {
+  const fp = param.floatingPoint;
+  if (fp === undefined || fp === null || fp < 0) return 0;
+  return Math.floor(fp);
+}
+
+function roundToDecimalPlaces(value: number, decimalPlaces: number): number {
+  if (decimalPlaces <= 0) return Math.round(value);
+  const factor = Math.pow(10, decimalPlaces);
+  return Math.round(value * factor) / factor;
+}
+
+function parseNumber(raw: string): number | null {
+  const trimmed = raw.trim();
+  if (trimmed === "") return null;
+  const parsed = Number(trimmed);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+function adjustValue(value: number, raw: string, param: INumber, decimalPlaces: number, forceClamp = false): number {
+  let result = roundToDecimalPlaces(value, decimalPlaces);
+  if (!param.isAutoAdjust) return result;
+
+  const inputLength = raw.trim().length;
+
+  if (param.minLength !== undefined && param.minLength !== null) {
+    const minLength = String(param.minLength).length;
+    if ((forceClamp || inputLength >= minLength) && result < param.minLength) result = param.minLength;
+  }
+  if (param.maxLength !== undefined && param.maxLength !== null) {
+    const maxLength = String(param.maxLength).length;
+    if ((forceClamp || inputLength >= maxLength) && result > param.maxLength) result = param.maxLength;
+  }
+  return result;
+}
+
+export const CreateNumber = (param: INumber, parentElement: HTMLElement | null, isTabular: boolean = false) => {
+  const ELEMENT_ID = GetInputId(param);
+  const hasPlaceholder = !IsNullOrEmpty(param.placeholder);
+  const decimalPlaces = getDecimalPlaces(param);
+
+  const input = CreateInput(param) as HTMLInputElement;
+  const box = CreateInputBox(param, input, null, isTabular);
+  const wrapper = isTabular ? box : CreateInputWrapper(param, box, parentElement);
+
+  function handleChanged(val: number | undefined | null, isInit: boolean, isForced: boolean, isDisposed: boolean) {
+    param.onChanged?.(val ?? null, isInit, isForced, isDisposed, ELEMENT_ID, undefined);
+    SetHaveValueClass(input, (val !== undefined && val !== null) || hasPlaceholder);
+  }
+
+  function forceChangeDefaultValue(defaultValue: number | null): boolean {
+    if (defaultValue === null || defaultValue === undefined) {
+      input.value = "";
+      handleChanged(null, false, true, false);
+      return true;
+    }
+    const adjusted = adjustValue(defaultValue, defaultValue.toString(), param, decimalPlaces, true);
+    input.value = adjusted.toString();
+    handleChanged(adjusted, false, true, false);
+    return true;
+  }
+
+  function onInputChanged() {
+    if (param.isAutoAdjust) return;
+    const parsed = parseNumber(input.value);
+    handleChanged(parsed, false, false, false);
+  }
+
+  function onBlur() {
+    if (!param.isAutoAdjust) return;
+    const raw = input.value;
+    const parsed = parseNumber(raw);
+    if (parsed === null) {
+      handleChanged(null, false, false, false);
+      return;
+    }
+    const adjusted = adjustValue(parsed, raw, param, decimalPlaces, true);
+    input.value = adjusted.toString();
+    handleChanged(adjusted, false, false, false);
+  }
+
+  if (!param.isAutoAdjust) input.addEventListener("input", onInputChanged);
+  if (param.isAutoAdjust) input.addEventListener("blur", onBlur);
+
+  // Keep initial display as loaded from DB/default — do not round or clamp on init.
+  handleChanged(param.defaultValue ?? null, true, false, false);
+
+  return {
+    input: param,
+    inputElement: input,
+    rootElement: wrapper,
+    forceChangeDefaultValue: forceChangeDefaultValue,
+    dispose: function (invokeOnChanged?: boolean) {
+      if (invokeOnChanged !== false) handleChanged(null, false, true, true);
+      input.removeEventListener("input", onInputChanged);
+      input.removeEventListener("blur", onBlur);
+      input.remove();
+      box.remove();
+      wrapper.remove();
+    },
+  } as IInputCreateResults;
+};

package/src/components/inputs/radiobox-input.tsx

@@ -0,0 +1,53 @@
+import { GetInputId, SetHaveValueClass } from "../../helpers/input-helpers";
+import { IInputCreateResults, IRadiobox } from "../../interfaces/input-interfaces";
+import { CreateInput } from "./input";
+import { CreateInputBox, CreateInputWrapper } from "./input-box";
+
+export const CreateRadiobox = (param: IRadiobox, parentElement: HTMLElement | null, isTabular: boolean, isCheckbox: boolean = false) => {
+  const input = CreateInput(param) as HTMLInputElement;
+  const ELEMENT_ID = GetInputId(param);
+
+  input.classList.add("pr");
+  input.classList.remove("ipt");
+  input.defaultChecked = param.defaultValue ?? false;
+  input.type = "radio";
+  if (isCheckbox) input.classList.add("checkbox");
+
+  const box = CreateInputBox(param, input, null, isTabular);
+  const label = box.querySelector("label") as HTMLLabelElement;
+  if (label) label.className = "p2 ilb hc o08";
+  const wrapper = isTabular ? box : CreateInputWrapper(param, box, parentElement);
+
+  box.classList.add("df", "ac", "pl3", "ipt-bxh");
+  box.classList.remove("ipt-bx");
+
+  function handleChanged(val: boolean, isInit: boolean, isForced: boolean, isDisposed: boolean) {
+    if (!val) return;
+
+    param.onChanged?.(param.checkedValue, isInit, isForced, isDisposed, ELEMENT_ID, undefined);
+  }
+  function forceChangeDefaultValue(defaultValue: boolean): boolean {
+    input.value = defaultValue.toString();
+    handleChanged(defaultValue, false, true, false);
+    return true;
+  }
+  function onInputChanged(e: Event) {
+    handleChanged(input.checked, false, false, false);
+  }
+  input.addEventListener("input", onInputChanged);
+  SetHaveValueClass(input, true);
+  handleChanged(input.checked, true, false, false);
+  return {
+    input: param,
+    inputElement: input,
+    rootElement: wrapper,
+    forceChangeDefaultValue: forceChangeDefaultValue,
+    dispose: function (invokeOnChanged?: boolean) {
+      if (invokeOnChanged !== false) handleChanged(param.defaultValue ?? false, false, true, true);
+      input.removeEventListener("input", onInputChanged);
+      input.remove();
+      box.remove();
+      wrapper.remove();
+    },
+  } as IInputCreateResults;
+};

package/src/components/inputs/textarea-input.tsx

@@ -0,0 +1,47 @@
+import { GetInputId, SetHaveValueClass } from "../../helpers/input-helpers";
+import { IsNullOrEmpty } from "../../helpers/string-helpers";
+import { IInputCreateResults, ITextarea } from "../../interfaces/input-interfaces";
+import { CreateInput } from "./input";
+import { CreateInputBox, CreateInputWrapper } from "./input-box";
+
+export const CreateTextarea = (param: ITextarea, parentElement: HTMLElement | null, isTabular: boolean = false) => {
+  const ELEMENT_ID = GetInputId(param);
+  const hasPlaceholder = !IsNullOrEmpty(param.placeholder);
+
+  const input = CreateInput(param) as HTMLTextAreaElement;
+  const box = CreateInputBox(param, input, null, isTabular);
+  const wrapper = isTabular ? box : CreateInputWrapper(param, box, parentElement);
+
+  box.classList.add("textarea-box");
+
+  function handleChanged(val: string | undefined | null, isInit: boolean, isForced: boolean, isDisposed: boolean) {
+    const value = val?.trim() ?? null;
+    const isNullorEmpty = IsNullOrEmpty(value);
+    param.onChanged?.(isNullorEmpty ? null : value, isInit, isForced, isDisposed, ELEMENT_ID, undefined);
+    SetHaveValueClass(input, !isNullorEmpty || hasPlaceholder);
+  }
+
+  function forceChangeDefaultValue(defaultValue: string | null): boolean {
+    input.value = defaultValue ?? "";
+    handleChanged(defaultValue, false, true, false);
+    return true;
+  }
+  function onInputChanged(e: Event) {
+    handleChanged((e.currentTarget as HTMLInputElement).value, false, false, false);
+  }
+  input.addEventListener("input", onInputChanged);
+  handleChanged(param.defaultValue, true, false, false);
+  return {
+    input: param,
+    inputElement: input,
+    rootElement: wrapper,
+    forceChangeDefaultValue: forceChangeDefaultValue,
+    dispose: function (invokeOnChanged?: boolean) {
+      if (invokeOnChanged !== false) handleChanged(null, false, true, true);
+      input.removeEventListener("input", onInputChanged);
+      input.remove();
+      box.remove();
+      wrapper.remove();
+    },
+  } as IInputCreateResults;
+};

package/src/components/inputs/textbox-input.tsx

@@ -0,0 +1,45 @@
+import { GetInputId, SetHaveValueClass } from "../../helpers/input-helpers";
+import { IsNullOrEmpty } from "../../helpers/string-helpers";
+import { IInputCreateResults, ITextbox } from "../../interfaces/input-interfaces";
+import { CreateInput } from "./input";
+import { CreateInputBox, CreateInputWrapper } from "./input-box";
+
+export const CreateTextbox = (param: ITextbox, parentElement: HTMLElement | null, isTabular: boolean = false) => {
+  const ELEMENT_ID = GetInputId(param);
+  const hasPlaceholder = !IsNullOrEmpty(param.placeholder);
+
+  const input = CreateInput(param);
+  const box = CreateInputBox(param, input, null, isTabular);
+  const wrapper = isTabular ? box : CreateInputWrapper(param, box, parentElement);
+
+  function handleChanged(val: string | undefined | null, isInit: boolean, isForced: boolean, isDisposed: boolean) {
+    const value = val?.trim() ?? null;
+    const isNullorEmpty = IsNullOrEmpty(value);
+    param.onChanged?.(isNullorEmpty ? null : value, isInit, isForced, isDisposed, ELEMENT_ID, undefined);
+    SetHaveValueClass(input, !isNullorEmpty || hasPlaceholder);
+  }
+
+  function forceChangeDefaultValue(defaultValue: string | null): boolean {
+    input.value = defaultValue ?? "";
+    handleChanged(defaultValue, false, true, false);
+    return true;
+  }
+  function onInputChanged(e: Event) {
+    handleChanged((e.currentTarget as HTMLInputElement).value, false, false, false);
+  }
+  input.addEventListener("input", onInputChanged);
+  handleChanged(param.defaultValue, true, false, false);
+  return {
+    input: param,
+    inputElement: input,
+    rootElement: wrapper,
+    forceChangeDefaultValue: forceChangeDefaultValue,
+    dispose: function (invokeOnChanged?: boolean) {
+      if (invokeOnChanged !== false) handleChanged(null, false, true, true);
+      input.removeEventListener("input", onInputChanged);
+      input.remove();
+      box.remove();
+      wrapper.remove();
+    },
+  } as IInputCreateResults;
+};

package/src/components/layouts/global-dialogbox.tsx

@@ -0,0 +1,433 @@
+import React, { useEffect } from "react";
+import { ConvertRemToPixels, IsKeyPressed } from "../../helpers/browser-helpers";
+import { Debounce, DebouncedFunction } from "../../helpers/utility-helpers";
+import { EKeys } from "../../interfaces/browser-interfaces";
+import { IDialogboxResults } from "../../interfaces/dialogbox-interfaces";
+import { DEFAULT_ANIMATION_DURATION, EPositions } from "../../interfaces/layout-interfaces";
+import { EBackgrounds } from "../../interfaces/theme-interfaces";
+import { UN } from "../../interfaces/type-interfaces";
+import { NEXUS_CONFIG } from "../../nexus.environments";
+
+const GetDialogId = (buttonIdentity: string) => `dialog-${buttonIdentity}`;
+const VISIBILITY_KEY = "data-dialog-visibility";
+export const DEFAULT_DIALOGBOX_HOVER_EFFECT_DELAY = 500;
+
+interface IDialogRegistryEntry {
+  triggerElement: HTMLElement;
+  affectedElement: HTMLElement;
+  iggnoreChildClick?: boolean;
+  close: (isInitial: boolean) => void;
+}
+
+/** All initialized dialogs — O(1) lookup by trigger. */
+const dialogRegistry = new Map<HTMLElement, IDialogRegistryEntry>();
+/** Only open dialogs — hot paths iterate this (usually 1–2), not all 100+ instances. */
+const openDialogs = new Set<HTMLElement>();
+
+let globalDocumentClickAttached = false;
+let globalDocumentClickTimeout: ReturnType<typeof setTimeout>;
+
+const shouldKeepDialogOpen = (entry: IDialogRegistryEntry, path: EventTarget[], target: HTMLElement) => {
+  if (entry.iggnoreChildClick === false) return target === entry.triggerElement;
+
+  return (
+    path.includes(entry.triggerElement) ||
+    path.includes(entry.affectedElement) ||
+    isClickInsideOpenNestedDialog(entry.triggerElement, path) ||
+    entry.triggerElement.contains(target)
+  );
+};
+
+const isClickInsideOpenNestedDialog = (parentTrigger: HTMLElement, path: EventTarget[]) => {
+  for (const trigger of openDialogs) {
+    if (trigger === parentTrigger) continue;
+    const nested = dialogRegistry.get(trigger);
+    if (!nested || !parentTrigger.contains(nested.triggerElement)) continue;
+    if (path.includes(nested.triggerElement) || path.includes(nested.affectedElement)) return true;
+  }
+  return false;
+};
+
+const onGlobalDocumentClick = (e: MouseEvent) => {
+  if (openDialogs.size === 0) return;
+
+  const path = e.composedPath();
+  const target = e.target as HTMLElement;
+
+  for (const trigger of [...openDialogs]) {
+    const entry = dialogRegistry.get(trigger);
+    if (!entry || shouldKeepDialogOpen(entry, path, target)) continue;
+    entry.close(false);
+  }
+};
+
+const scheduleGlobalDocumentClick = () => {
+  clearTimeout(globalDocumentClickTimeout);
+  globalDocumentClickTimeout = setTimeout(() => {
+    if (openDialogs.size === 0) return;
+    if (!globalDocumentClickAttached) {
+      document.addEventListener("click", onGlobalDocumentClick);
+      globalDocumentClickAttached = true;
+    }
+  }, 0);
+};
+
+const teardownGlobalDocumentClick = () => {
+  if (openDialogs.size > 0) return;
+  clearTimeout(globalDocumentClickTimeout);
+  document.removeEventListener("click", onGlobalDocumentClick);
+  globalDocumentClickAttached = false;
+};
+
+/** Keep parent panels open when opening a nested dialog (e.g. theme overflow ellipsis inside utility menu). */
+const closeOtherDialogs = (currentTrigger: HTMLElement, isInitial: boolean) => {
+  for (const trigger of openDialogs) {
+    if (trigger === currentTrigger) continue;
+    const entry = dialogRegistry.get(trigger);
+    if (!entry) continue;
+    if (entry.triggerElement.contains(currentTrigger)) continue;
+    entry.close(isInitial);
+  }
+};
+
+const closeNestedDialogs = (parentTrigger: HTMLElement, isInitial: boolean) => {
+  for (const trigger of openDialogs) {
+    if (trigger === parentTrigger) continue;
+    const entry = dialogRegistry.get(trigger);
+    if (!entry || !parentTrigger.contains(entry.triggerElement)) continue;
+    entry.close(isInitial);
+  }
+};
+
+const registerDialog = (entry: IDialogRegistryEntry) => {
+  dialogRegistry.set(entry.triggerElement, entry);
+};
+
+const unregisterDialog = (triggerElement: HTMLElement) => {
+  openDialogs.delete(triggerElement);
+  dialogRegistry.delete(triggerElement);
+  teardownGlobalDocumentClick();
+};
+
+/**
+ *
+ * @param children
+ * @param position
+ * @param buttonIdentity
+ * @param background
+ * @param defaultWidth The default width of the dialog box (in REM units).
+ * @param defaultPadding
+ * @param iggnoreChildClick
+ * @param isFixedHeight
+ * @param defaultClass
+ * @param preferTopWhenEnoughSpace
+ *
+ * @returns
+ */
+interface IDialogboxProps {
+  children: React.ReactNode;
+  hoverEffectDelay?: number | boolean;
+  position?: EPositions;
+  buttonIdentity: string;
+  background?: EBackgrounds;
+  defaultWidth?: number;
+  defaultPadding?: number;
+  autoAdjuctPosition?: boolean;
+  iggnoreChildClick?: boolean;
+  isFixedHeight?: boolean;
+  preferTopWhenEnoughSpace?: boolean;
+  defaultClass?: string;
+}
+
+export const GlobalDialogbox = ({ children, hoverEffectDelay, position, buttonIdentity, background, defaultWidth, defaultPadding, iggnoreChildClick, isFixedHeight, defaultClass, preferTopWhenEnoughSpace }: Readonly<IDialogboxProps>) => {
+  const [isVisible, setIsVisible] = React.useState<boolean>(false);
+
+  const onVisibilityChanged = (visible: boolean) => {
+    setIsVisible(visible);
+  };
+  const onDisposed = () => {};
+
+  useEffect(() => {
+    let dialogResults: IDialogboxResults | null = null;
+    const timeout = setTimeout(() => {
+      clearTimeout(timeout);
+      const button = document.getElementById(buttonIdentity);
+      const dialog = document.getElementById(GetDialogId(buttonIdentity));
+      if (!button || !dialog) return;
+
+      const defaultHeight = isFixedHeight ? "80vh" : undefined;
+      dialogResults = InitializeDialogbox(button, dialog, hoverEffectDelay, defaultHeight, defaultPadding, defaultWidth, background, onVisibilityChanged, onDisposed, iggnoreChildClick, position, defaultClass, preferTopWhenEnoughSpace, null);
+    }, 0);
+    return () => {
+      dialogResults?.destroy();
+      clearTimeout(timeout);
+    };
+  }, []);
+
+  return <ul id={GetDialogId(buttonIdentity)}>{isVisible && children}</ul>;
+};
+
+export const InitializeDialogbox = (triggerElement: HTMLElement, affectedElement: HTMLElement, hoverEffectDelay?: number | boolean, defaultHeight?: string, defaultPadding?: number, defaultWidth?: number, background?: EBackgrounds, onVisibilityChanged?: (isVisible: boolean) => void, onDisposed?: () => void, iggnoreChildClick?: boolean, position?: EPositions, defaultClass?: string, preferTopWhenEnoughSpace?: boolean, targetInput?: HTMLTextAreaElement | HTMLInputElement | UN, isAutoHideInInitialization?: boolean): IDialogboxResults | null => {
+  if (!triggerElement || !affectedElement) return null;
+  defaultHeight = defaultHeight ?? "auto";
+  defaultPadding = defaultPadding ?? 5;
+  defaultWidth = defaultWidth ?? 34;
+
+  const isTargetForInput: boolean = targetInput ? true : false;
+
+  const forceUpdate = (index: number) => {
+    if (index === 0) {
+      affectedElement.classList.remove("anim", "dn");
+    } else if (index === 1) {
+      affectedElement.classList.add("dn");
+      affectedElement.classList.remove("anim");
+    }
+  };
+  const forceUpdateDebounced = Debounce(forceUpdate, 300);
+  const refreshDialog = () => {
+    const dialog = affectedElement;
+    const parentElement = triggerElement;
+
+    if (!parentElement) return;
+
+    const inputRec = parentElement.getBoundingClientRect();
+    const boxRec = dialog.getBoundingClientRect();
+    const style = window.getComputedStyle(parentElement);
+    const inputHeight = inputRec.height + parseFloat(style.borderBottomWidth) + parseFloat(style.borderTopWidth);
+    const top = inputRec.top + inputHeight;
+    const windowHeight = window.innerHeight;
+    const bottomOverflow = top + boxRec.height;
+    dialog.classList.remove("T");
+
+    const topSpace = inputRec.top - boxRec.height;
+    const bottomSpace = windowHeight - (inputRec.top + inputHeight + boxRec.height);
+
+    if (!isTargetForInput) {
+      if (preferTopWhenEnoughSpace && topSpace > 0 && bottomSpace > 0) {
+        // Both sides have space, prefer top
+        dialog.classList.add("T");
+        dialog.style.top = `${top - inputHeight - boxRec.height}px`;
+      } else if (bottomOverflow > windowHeight) {
+        // Bottom overflow
+        if (top - inputHeight - boxRec.height > 0) {
+          dialog.classList.add("T");
+          dialog.style.top = `${top - inputHeight - boxRec.height}px`;
+        } else {
+          // If no space on top either, push to bottom of screen
+          dialog.style.top = `${windowHeight - boxRec.height}px`;
+        }
+      } else {
+        // Default to bottom
+        dialog.style.top = `${top}px`;
+      }
+    }
+
+    // REM to PX conversion
+
+    const DEFAULT_PADDING = ConvertRemToPixels(1);
+
+    if (position === EPositions.Right) dialog.style.left = `${inputRec.right - boxRec.width}px`;
+    else if (position === EPositions.Left) dialog.style.left = `${inputRec.left}px`;
+    else if (position === EPositions.Center) dialog.style.left = `${inputRec.left + inputRec.width / 2 - boxRec.width / 2}px`;
+
+    // Handle viewport overflow for dialogs without explicit position
+    if (!position) {
+      if (inputRec.left + boxRec.width > window.innerWidth) dialog.style.left = `${window.innerWidth - boxRec.width - DEFAULT_PADDING}px`;
+      else dialog.style.left = `${inputRec.left}px`;
+    } else {
+      // For positioned dialogs, just check if they overflow and adjust if needed
+      const currentLeft = parseFloat(dialog.style.left);
+      if (!isNaN(currentLeft) && currentLeft + boxRec.width > window.innerWidth) {
+        dialog.style.left = `${window.innerWidth - boxRec.width - DEFAULT_PADDING}px`;
+      }
+    }
+
+    if (parseFloat(dialog.style.left) < DEFAULT_PADDING) dialog.style.left = `${DEFAULT_PADDING}px`;
+
+    // ----- Arrow positioning (works for Left / Center / Right) -----
+    const dialogRect = dialog.getBoundingClientRect();
+    const inputCenterX = inputRec.left + inputRec.width / 2;
+
+    // Arrow position relative to dialog
+    let arrowLeft = inputCenterX - dialogRect.left + ConvertRemToPixels(0.15);
+
+    // Clamp arrow to dialog bounds (optional but recommended)
+    const ARROW_MARGIN = ConvertRemToPixels(1);
+    arrowLeft = Math.max(ARROW_MARGIN, Math.min(arrowLeft, boxRec.width - ARROW_MARGIN));
+
+    dialog.style.setProperty("--arrow-left", `${arrowLeft}px`);
+
+    const pxWidth = inputRec.width;
+    const DEFAULT_WIDTH = ConvertRemToPixels(defaultWidth);
+    dialog.style.width = `${Math.max(pxWidth, DEFAULT_WIDTH)}px`;
+  };
+  const _onMouseEnter = (e: MouseEvent) => {
+    if (!triggerElement.matches(":hover")) return;
+    if (e.target !== triggerElement) return;
+
+    const isVisible = triggerElement.getAttribute(VISIBILITY_KEY) === "true";
+    if (!isVisible) visibility(true, false);
+  };
+  let hoverListenersAttached = false;
+  let onMouseEnterDebounced: DebouncedFunction<typeof _onMouseEnter> | null = null;
+  const getHoverDebounce = () => {
+    if (!onMouseEnterDebounced) {
+      onMouseEnterDebounced = Debounce(_onMouseEnter, (hoverEffectDelay === true ? DEFAULT_DIALOGBOX_HOVER_EFFECT_DELAY : (hoverEffectDelay as number)) ?? DEFAULT_DIALOGBOX_HOVER_EFFECT_DELAY);
+    }
+    return onMouseEnterDebounced;
+  };
+  const onMouseLeaveCancelHover = () => {
+    onMouseEnterDebounced?.cancel();
+  };
+  const attachHoverListeners = () => {
+    if (!hoverEffectDelay || hoverListenersAttached) return;
+    triggerElement.addEventListener("mouseenter", getHoverDebounce());
+    triggerElement.addEventListener("mouseleave", onMouseLeaveCancelHover);
+    hoverListenersAttached = true;
+  };
+  const onHoverProxy = (e: MouseEvent) => {
+    attachHoverListeners();
+    triggerElement.removeEventListener("mouseenter", onHoverProxy);
+    getHoverDebounce()(e);
+  };
+
+  const setupDialog = () => {
+    triggerElement.addEventListener("click", onClick);
+    if (hoverEffectDelay) triggerElement.addEventListener("mouseenter", onHoverProxy);
+    if (isTargetForInput) {
+      triggerElement.addEventListener("focusin", onFocus);
+      triggerElement.addEventListener("focusout", onFocusOut);
+      document.addEventListener("keydown", onKeyDown, true);
+    }
+
+    const timeout = setTimeout(() => {
+      clearTimeout(timeout);
+      refreshDialog();
+      isAutoHideInInitialization = isAutoHideInInitialization ?? true;
+      visibility(!isAutoHideInInitialization, true);
+    }, 0);
+  };
+  const cleanupDialog = () => {
+    triggerElement.setAttribute(VISIBILITY_KEY, "false");
+    triggerElement.removeEventListener("click", onClick);
+    if (hoverEffectDelay) {
+      triggerElement.removeEventListener("mouseenter", onHoverProxy);
+      if (hoverListenersAttached) {
+        triggerElement.removeEventListener("mouseenter", getHoverDebounce());
+        triggerElement.removeEventListener("mouseleave", onMouseLeaveCancelHover);
+        onMouseEnterDebounced?.cancel();
+      }
+    }
+    clearTimeout(visibilityTimeout);
+    teardownGlobalDocumentClick();
+    if (isTargetForInput) {
+      triggerElement.removeEventListener("focusin", onFocus);
+      triggerElement.removeEventListener("focusout", onFocusOut);
+      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("scroll", onDocumentScroll);
+    }
+    unregisterDialog(triggerElement);
+    onDisposed?.();
+  };
+  let visibilityTimeout: NodeJS.Timeout;
+  const visibility = (visible: boolean, isInitial: boolean) => {
+    const isVisible = visible;
+    if (!triggerElement) return;
+    if (isVisible) {
+      if (!isInitial) closeOtherDialogs(triggerElement, false);
+
+      openDialogs.add(triggerElement);
+      scheduleGlobalDocumentClick();
+
+      clearTimeout(visibilityTimeout);
+      forceUpdateDebounced.cancel();
+      onMouseEnterDebounced?.cancel();
+
+      onVisibilityChanged?.(isVisible);
+      refreshDialog();
+      const timeout2 = setTimeout(() => {
+        clearTimeout(timeout2);
+        refreshDialog();
+      }, 0);
+
+      affectedElement.classList.remove("dn");
+      affectedElement.style.pointerEvents = "";
+      const timeout = setTimeout(() => {
+        clearTimeout(timeout);
+        affectedElement.classList.remove("o0");
+        affectedElement.classList.add("anim");
+        triggerElement.setAttribute(VISIBILITY_KEY, "true");
+      }, 10);
+      forceUpdateDebounced(0);
+
+      if (isTargetForInput) document.addEventListener("scroll", onDocumentScroll);
+    } else {
+      if (!isInitial) closeNestedDialogs(triggerElement, false);
+
+      openDialogs.delete(triggerElement);
+      teardownGlobalDocumentClick();
+
+      if (isTargetForInput) document.removeEventListener("scroll", onDocumentScroll);
+
+      affectedElement.classList.add("o0", "anim");
+      affectedElement.style.pointerEvents = "none";
+      if (isInitial) forceUpdate(1);
+      forceUpdateDebounced(1);
+      visibilityTimeout = setTimeout(() => {
+        if (!isInitial) onVisibilityChanged?.(false);
+        clearTimeout(visibilityTimeout);
+        triggerElement.setAttribute(VISIBILITY_KEY, "false");
+      }, DEFAULT_ANIMATION_DURATION);
+    }
+  };
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (IsKeyPressed(e, EKeys.TAB)) if (document.activeElement !== triggerElement) visibility(false, false);
+  };
+  const onClick = (e: MouseEvent) => {
+    const isOpen = triggerElement.getAttribute(VISIBILITY_KEY) === "true";
+    const target = e.target as HTMLElement;
+    if (isOpen && target.id !== triggerElement.id && target !== triggerElement) return;
+
+    if (isOpen && isTargetForInput) return;
+
+    visibility(!isOpen, false);
+    e.stopPropagation();
+  };
+  const onFocus = (e: FocusEvent) => {
+    if (isTargetForInput) visibility(true, false);
+  };
+
+  const onFocusOut = (e: FocusEvent) => {
+    if (!isTargetForInput) return;
+
+    if (!triggerElement) return;
+    if (!e.relatedTarget || triggerElement.contains(e.relatedTarget as Node | null)) return;
+
+    visibility(false, false);
+  };
+  const onDocumentScroll = (e: Event) => {};
+
+  registerDialog({
+    triggerElement,
+    affectedElement,
+    iggnoreChildClick,
+    close: (isInitial) => visibility(false, isInitial),
+  });
+
+  if (!affectedElement.classList.contains("dialog")) {
+    affectedElement.className = defaultClass ?? "dialog";
+    affectedElement.classList.add("pf", "r", "bs2", "b1", "df", "ddc", `p${defaultPadding}`, background ?? NEXUS_CONFIG.DEFAULT_BACKGROUND, position ?? EPositions.Left);
+    setupDialog();
+    affectedElement.style.maxWidth = `calc(100vw - ${ConvertRemToPixels(2)}px)`;
+    affectedElement.style.maxHeight = `calc(80vh)`;
+  }
+
+  // Add input-dialog class if it's a target for input to handle specific styling
+  if (isTargetForInput && !affectedElement.classList.contains("input-dialog")) affectedElement.classList.add("input-dialog");
+
+  return {
+    destroy: cleanupDialog,
+    visibility: visibility,
+    isValid: () => !!affectedElement?.parentElement,
+  } as IDialogboxResults;
+};