nexus-shared 1.1.20 → 2.0.0

package/src/Styles/Nexus.Tree.css

@@ -0,0 +1,435 @@
+@layer nexus.components {
+  /*
+   * Tree view: a panel with a toolbar and a scrolling list of rows. Rows have a fixed height (the component places
+   * rows by it: keep --nx-tree-row and --nx-tree-pad in step with ROW_HEIGHT and PAD in TreeView.tsx). The checkbox
+   * is the CheckBox control itself, so checked, mixed, and read-only boxes look the same as everywhere else.
+   */
+  .nx-tree {
+    --nx-tree-row: 32px;
+    --nx-tree-pad: 4px;
+    --nx-tree-indent: 20px;
+    --nx-tree-font: var(--nx-text-md);
+    --nx-tree-open: 200ms;
+    --nx-tree-close: 160ms;
+    /* A line under every parent's chevron, soft enough to leave the rows in front. */
+    --nx-tree-guide: color-mix(in oklab, var(--nx-border-strong) 55%, transparent);
+
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    overflow: hidden;
+    border: 1px solid var(--nx-field-border);
+    border-radius: var(--nx-radius);
+    background: var(--nx-field-bg);
+    color: var(--nx-text);
+    font-size: var(--nx-tree-font);
+    line-height: 1.35;
+    transition: border-color var(--nx-duration);
+  }
+
+  .nx-tree--sm {
+    --nx-tree-row: 28px;
+    --nx-tree-indent: 18px;
+    --nx-tree-font: var(--nx-text-sm);
+  }
+
+  .nx-tree--lg {
+    --nx-tree-row: 38px;
+    --nx-tree-indent: 22px;
+    --nx-tree-font: var(--nx-text-lg);
+  }
+
+  .nx-tree:hover {
+    border-color: var(--nx-field-border-hover);
+  }
+
+  .nx-tree:focus-within {
+    border-color: var(--nx-field-accent);
+  }
+
+  .nx-field:is([data-readonly], [data-disabled]) .nx-tree {
+    border-color: var(--nx-field-border);
+  }
+
+  /* Toolbar: select all and counts at the start, tools at the end, a line under it. */
+  .nx-tree__toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--nx-space-1) var(--nx-space-3);
+    min-height: calc(var(--nx-control-sm) + 12px);
+    padding: 6px 6px 6px var(--nx-space-3);
+    border-bottom: 1px solid var(--nx-border);
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-tree__all {
+    flex: none;
+  }
+
+  .nx-tree__all .nx-choice__label {
+    font-weight: 500;
+  }
+
+  /* A read-only tree has one lock, after its label; select all still shows the note when clicked. */
+  .nx-tree__all .nx-field__lock {
+    display: none;
+  }
+
+  .nx-tree__summary {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    margin-right: auto;
+    color: var(--nx-text-muted);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .nx-tree__summary .nx-icon {
+    width: 14px;
+    height: 14px;
+    vertical-align: 0;
+  }
+
+  .nx-tree__tools {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .nx-tree__tools .nx-btn--secondary {
+    margin-left: var(--nx-space-1);
+  }
+
+  /* Rows */
+  .nx-tree__viewport {
+    position: relative;
+    overflow: auto;
+    overscroll-behavior: contain;
+    outline: none;
+    scrollbar-width: thin;
+    scrollbar-color: var(--nx-field-scrollbar) transparent;
+  }
+
+  .nx-tree__viewport:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--nx-primary);
+  }
+
+  .nx-tree__list {
+    min-width: 0;
+    padding-inline: var(--nx-tree-pad);
+  }
+
+  .nx-tree__row {
+    --nx-tree-depth: 0;
+    /* Muted texts of a row. On a hovered or focused row they move toward the text color, so they keep 4.5:1 on the
+       hover tint in every theme. */
+    --nx-tree-muted: var(--nx-text-muted);
+    --nx-tree-count: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 25%);
+
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    height: var(--nx-tree-row);
+    padding: 0 4px 0 calc(var(--nx-tree-depth) * var(--nx-tree-indent));
+    border-radius: var(--nx-radius);
+    /* Guides: one line per level, centered under the chevron of the parent at that level. */
+    background-image: repeating-linear-gradient(
+      to right,
+      transparent 0 calc(var(--nx-tree-indent) / 2 - 0.5px),
+      var(--nx-tree-guide) calc(var(--nx-tree-indent) / 2 - 0.5px) calc(var(--nx-tree-indent) / 2 + 0.5px),
+      transparent calc(var(--nx-tree-indent) / 2 + 0.5px) var(--nx-tree-indent)
+    );
+    background-repeat: no-repeat;
+    background-size: calc(var(--nx-tree-depth) * var(--nx-tree-indent)) 100%;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .nx-tree__row[role="treeitem"]:hover {
+    background-color: var(--nx-surface-hover);
+  }
+
+  .nx-tree__row:focus-visible {
+    background-color: var(--nx-surface-hover);
+    box-shadow: inset 0 0 0 2px var(--nx-primary);
+  }
+
+  .nx-tree__row[role="treeitem"]:is(:hover, :focus-visible) {
+    --nx-tree-muted: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 35%);
+    --nx-tree-count: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 50%);
+  }
+
+  .nx-tree__toggle {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: var(--nx-tree-indent);
+    height: var(--nx-tree-indent);
+    margin-right: -2px;
+    border-radius: var(--nx-radius-sm);
+    color: var(--nx-tree-muted);
+  }
+
+  .nx-tree__toggle .nx-icon {
+    width: 14px;
+    height: 14px;
+    vertical-align: 0;
+    transition: transform var(--nx-tree-open) cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .nx-tree__row[aria-expanded="true"] > .nx-tree__toggle .nx-icon {
+    transform: rotate(90deg);
+  }
+
+  .nx-tree__toggle:has(.nx-icon):hover {
+    background: color-mix(in oklab, var(--nx-text) 10%, transparent);
+    color: var(--nx-text);
+  }
+
+  /* The CheckBox control, without its label's line-height offset; the row takes the clicks. */
+  .nx-tree__check {
+    flex: none;
+    align-items: center;
+    gap: 0;
+  }
+
+  .nx-tree__check .nx-choice__control {
+    margin: 0;
+    pointer-events: none;
+  }
+
+  .nx-tree__row:hover .nx-choice__control:not(:checked, :indeterminate, :disabled) {
+    border-color: var(--nx-choice-border-hover);
+  }
+
+  .nx-tree__icon {
+    display: grid;
+    flex: none;
+    place-items: center;
+    color: var(--nx-tree-muted);
+  }
+
+  .nx-tree__icon .nx-icon {
+    width: 1.15em;
+    height: 1.15em;
+    vertical-align: 0;
+  }
+
+  .nx-tree__text {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: baseline;
+    gap: var(--nx-space-2);
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .nx-tree__label {
+    flex: 0 1 auto;
+    min-width: 2em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .nx-tree__description {
+    flex: 0 100 auto;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--nx-tree-muted);
+    font-size: calc(var(--nx-tree-font) - 1px);
+    text-overflow: ellipsis;
+  }
+
+  .nx-tree__count {
+    flex: none;
+    padding: 0 6px;
+    border-radius: var(--nx-radius-full);
+    background: color-mix(in oklab, var(--nx-text) 7%, transparent);
+    color: var(--nx-tree-count);
+    font-size: var(--nx-text-xs);
+    font-variant-numeric: tabular-nums;
+    line-height: 18px;
+  }
+
+  .nx-tree__lock,
+  .nx-tree__busy {
+    display: grid;
+    flex: none;
+    place-items: center;
+    color: var(--nx-tree-muted);
+  }
+
+  .nx-tree__lock .nx-icon,
+  .nx-tree__busy {
+    width: 14px;
+    height: 14px;
+    vertical-align: 0;
+  }
+
+  /* A locked item: the read-only box (data-readonly), a muted label, and a lock. */
+  .nx-tree__row--locked {
+    cursor: default;
+  }
+
+  .nx-tree__row--locked .nx-tree__label {
+    color: var(--nx-tree-muted);
+  }
+
+  /* Actions show on the row under the pointer or with focus; on touch screens, always. They keep their space, so
+     labels do not jump when they appear. */
+  .nx-tree__actions {
+    display: flex;
+    flex: none;
+    gap: 1px;
+    margin-left: auto;
+    visibility: hidden;
+  }
+
+  .nx-tree__row:is(:hover, :focus-visible, :focus-within) > .nx-tree__actions {
+    visibility: visible;
+  }
+
+  @media (hover: none) {
+    .nx-tree__actions {
+      visibility: visible;
+    }
+  }
+
+  .nx-btn.nx-tree__action {
+    --nx-btn-height: calc(var(--nx-tree-row) - 6px);
+  }
+
+  .nx-tree__action .nx-icon {
+    width: 15px;
+    height: 15px;
+  }
+
+  /* The name box of a row being added or renamed. */
+  .nx-tree__edit {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: 1px;
+    min-width: 0;
+  }
+
+  .nx-tree__input {
+    flex: 1 1 auto;
+    width: 0;
+    min-width: 6em;
+    height: calc(var(--nx-tree-row) - 6px);
+    margin: 0 2px 0 0;
+    padding: 0 6px;
+    border: 1px solid var(--nx-field-accent);
+    border-radius: var(--nx-radius-sm);
+    background: var(--nx-surface);
+    box-shadow: var(--nx-field-ring);
+    color: var(--nx-text);
+    font: inherit;
+    outline: none;
+  }
+
+  .nx-tree__input[aria-invalid="true"] {
+    border-color: var(--nx-danger);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--nx-danger) 30%, transparent);
+  }
+
+  .nx-tree__input:read-only {
+    color: var(--nx-text-muted);
+  }
+
+  /*
+   * Expand and collapse: the rows that come or go sit in a group whose height opens from 0, or closes to 0. Only the
+   * rows in view are in the group, so opening 10,000 children animates about 30 rows.
+   */
+  .nx-tree__motion {
+    height: var(--nx-tree-motion-height);
+    overflow: hidden;
+  }
+
+  .nx-tree__motion--open {
+    animation: nx-tree-open var(--nx-tree-open) cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .nx-tree__motion--close {
+    height: 0;
+    pointer-events: none;
+    animation: nx-tree-close var(--nx-tree-close) cubic-bezier(0.3, 0, 0.8, 0.15);
+  }
+
+  @keyframes nx-tree-open {
+    from {
+      height: 0;
+      opacity: 0.35;
+    }
+  }
+
+  @keyframes nx-tree-close {
+    from {
+      height: var(--nx-tree-motion-height);
+      opacity: 1;
+    }
+    to {
+      height: 0;
+      opacity: 0;
+    }
+  }
+
+  /* Loading and empty */
+  .nx-tree__row--skeleton {
+    cursor: default;
+  }
+
+  .nx-tree__skeleton {
+    display: inline-block;
+    height: 0.7em;
+    border-radius: var(--nx-radius-full);
+    background: color-mix(in oklab, var(--nx-text) 11%, transparent);
+    animation: nx-tree-pulse 1.2s ease-in-out infinite;
+  }
+
+  @keyframes nx-tree-pulse {
+    50% {
+      opacity: 0.45;
+    }
+  }
+
+  .nx-tree__empty {
+    margin: 0;
+    padding: var(--nx-space-6) var(--nx-space-4);
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    text-align: center;
+  }
+
+  /* States of the whole tree */
+  .nx-field[data-disabled] .nx-tree__row {
+    cursor: not-allowed;
+  }
+
+  .nx-field[data-disabled] .nx-tree__row:hover {
+    background-color: transparent;
+  }
+
+  .nx-field[data-readonly] .nx-tree__row {
+    cursor: default;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nx-tree__motion,
+    .nx-tree__skeleton {
+      animation: none;
+    }
+
+    .nx-tree,
+    .nx-tree__toggle .nx-icon {
+      transition: none;
+    }
+  }
+}

package/src/api-services/authentication-service.tsx

@@ -1,23 +0,0 @@
-import { GetSignOutPageURL } from "../helpers/browser-helpers";
-import { BuildProxyApiUrl, EModules, ICurrentUser, IErrorRespose, ISuccessResponse } from "../interface";
-import { HttpGet, HttpPost } from "../services/http-services";
-import { ShowLoader } from "../services/loader-service";
-
-export const GetProfileDetails = async (autoRefresh?: boolean): Promise<ICurrentUser | null> => {
-  //Profile/Details
-  const response = await HttpGet(BuildProxyApiUrl(EModules.Authentication, "Profile/Details"), null, 0);
-  if (response?.isSuccess) return response.result as ICurrentUser;
-
-  if (response?.code === 401 && autoRefresh) {
-    const refreshResponse = await RefreshAuthToken();
-    if (refreshResponse?.isSuccess) return GetProfileDetails(false);
-    else {
-      ShowLoader();
-      window.location.href = GetSignOutPageURL();
-    }
-  }
-
-  return null;
-};
-
-export const RefreshAuthToken = async (): Promise<ISuccessResponse | IErrorRespose> => HttpPost("/api/auth/refresh", null, null, null, 0);

package/src/api-services/preference-service.tsx

@@ -1,5 +0,0 @@
-import { EPreferenceTargets } from "../interfaces/system-interfaces";
-
-export const CreateUpdatePreference = async (target: EPreferenceTargets, key: string, value: string | null) => {
-  // TODO: Implement CreateUpdatePreference
-};

package/src/api-services/system-service.tsx

@@ -1,34 +0,0 @@
-"use server";
-
-import { IThemeInformation } from "../interface";
-import { EMenuTargets, IClientMenu, IPanelMenu, IUtilityMenu } from "../interfaces/menu-interfaces";
-import { APIS, NEXUS_CONFIG, NEXUS_INFO } from "../nexus.environments";
-import { HttpGet } from "../services/http-services";
-
-const TOKEN_GLOBAL_CLIENT_MENU = "DJ3FKL4_IOR4U5_I4O5J4KDLJ_U_IO";
-const TOKEN_GLOBAL_UTILITY_MENU = "DJ3FKL4_IOR4U5_I4O5J4KDLJ_dfj45k_d";
-const TOKEN_GLOBAL_PANEL_MENU = "dj_dfjk3453IOR4U5_I4O5J4KDLJ_dfj45k_d";
-const TOKEN_GLOBAL_THEMES = "DJWJR_GJDK_65GKD54ZJD_00";
-
-export const GetClientMenusAsync = async (): Promise<IClientMenu[]> => {
-  const response = await HttpGet(`${APIS.CONFIGURATION}/Resources/GlobalMenus/${NEXUS_INFO.CURRENT_MODULE}/${NEXUS_INFO.IS_ADMIN_MODULE ? EMenuTargets.AdminModule : EMenuTargets.ClientModule}/${TOKEN_GLOBAL_CLIENT_MENU}`, null, NEXUS_CONFIG.DEFAULT_REVALIDATE_TIME_ONE_DAY);
-  if (!response.isSuccess) return [];
-  return response.result as IClientMenu[];
-};
-
-export const GetUtilityMenusAsync = async (): Promise<IUtilityMenu[]> => {
-  const response = await HttpGet(`${APIS.CONFIGURATION}/Resources/UtilityMenus/${NEXUS_INFO.CURRENT_MODULE}/${NEXUS_INFO.IS_ADMIN_MODULE ? EMenuTargets.AdminModule : EMenuTargets.ClientModule}/${TOKEN_GLOBAL_UTILITY_MENU}`, null, NEXUS_CONFIG.DEFAULT_REVALIDATE_TIME_ONE_DAY);
-  if (!response.isSuccess) return [];
-  return response.result as IUtilityMenu[];
-};
-
-export const GetUserPanelsAsync = async (): Promise<IPanelMenu[]> => {
-  const response = await HttpGet(`${APIS.CONFIGURATION}/Resources/PanelMenus/${NEXUS_INFO.CURRENT_MODULE}/${NEXUS_INFO.IS_ADMIN_MODULE ? EMenuTargets.AdminModule : EMenuTargets.ClientModule}/${TOKEN_GLOBAL_PANEL_MENU}`, null, NEXUS_CONFIG.DEFAULT_REVALIDATE_TIME_ONE_DAY);
-  if (!response.isSuccess) return [];
-  return response.result as IPanelMenu[];
-};
-export const GetSystemThemesAsync = async (): Promise<IThemeInformation[]> => {
-  const response = await HttpGet(`${APIS.CONFIGURATION}/Resources/Themes/${TOKEN_GLOBAL_THEMES}`, null, NEXUS_CONFIG.DEFAULT_REVALIDATE_TIME_ONE_DAY);
-  if (!response.isSuccess) return [];
-  return response.result as IThemeInformation[];
-};

package/src/client.ts

@@ -1,31 +0,0 @@
-"use client";
-
-// React hooks (useEffect / useState)
-export * from "./components/documents/tab-button";
-export * from "./components/layouts/global-dialogbox";
-export * from "./components/layouts/layout-helpers";
-export * from "./components/layouts/utility-menu";
-export * from "./components/panels/theme-panel";
-
-export * from "./components/inputs/checkbox-input";
-export * from "./components/inputs/input-form";
-export * from "./components/inputs/number-input";
-export * from "./components/inputs/radiobox-input";
-export * from "./components/inputs/textarea-input";
-export * from "./components/inputs/textbox-input";
-
-// document / window / localStorage
-export * from "./components/documents/button";
-export * from "./components/documents/icon-box";
-export * from "./components/inputs/input";
-export * from "./components/inputs/input-box";
-export * from "./components/inputs/input-element";
-export * from "./helpers/browser-helpers";
-export * from "./services/http-client-services";
-export * from "./services/loader-service";
-export * from "./services/localstorage-service";
-export * from "./services/user-services";
-export * from "./services/message-services";
-export * from "./services/theme-service";
-// Core
-export * from "./nexus-client";

package/src/components/documents/button.tsx

@@ -1,142 +0,0 @@
-import Link from "next/link";
-import React from "react";
-import { IsValidURL } from "../../helpers/browser-helpers";
-import { SetElementStyles } from "../../helpers/element-helpers";
-import { DEFAULT_BUTTON_CLASS, DEFAULT_LINK_BUTTON_STYLE, EButtonTypes, ETargets, IButton } from "../../interfaces/button-interfaces";
-import { DEFAULT_ICON_SIZE, EIconTypes } from "../../interfaces/icon-interfaces";
-import { COLUMN_SIZE_ATTRIBUTE_KEY, EFlexPositions, EOpacity } from "../../interfaces/layout-interfaces";
-import { EBackgroundColors, EBackgrounds } from "../../interfaces/theme-interfaces";
-import { ClickHandler, UN } from "../../interfaces/type-interfaces";
-import { NEXUS_CONFIG } from "../../nexus.environments";
-import { CreateIcon, Icon } from "./icon-box";
-
-export const SET_BUTTON_ACTIVE_CLASS = (isActive: boolean, element: HTMLElement, overrideBackgroundColor?: EBackgroundColors | UN, overrideBorderColor?: EBackgroundColors | UN, overrideTextColor?: EBackgroundColors | UN, overrideActiveClass?: string | UN) => {
-  if (!element) return;
-
-  if (isActive && overrideBackgroundColor) element.style.setProperty("--ACTIVE_BACKGROUND_COLOR", overrideBackgroundColor);
-  if (isActive && overrideBorderColor) element.style.setProperty("--ACTIVE_BORDER_COLOR", overrideBorderColor);
-  if (isActive && overrideTextColor) element.style.setProperty("--ACTIVE_TEXT_COLOR", overrideTextColor);
-
-  if (isActive) element.classList.add(overrideActiveClass ?? "active");
-  else element.classList.remove(overrideActiveClass ?? "active");
-};
-
-export const Button = ({ button, buttonType, styles, needColumnSize }: { button: IButton; buttonType?: EButtonTypes; styles?: React.CSSProperties | UN; needColumnSize?: boolean | UN }) => {
-  return IsValidURL(button.url) ? (
-    <Link href={button.url ?? "#"} style={styles ?? undefined} className={DEFAULT_BUTTON_CLASS(button.columnSize, undefined, button.borderSize, button.background, button.defaultClass, needColumnSize)} key={button.displayOrder ?? 0} type={buttonType ?? EButtonTypes.BUTTON} onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => button.onClick?.(event, event.currentTarget as HTMLElement, button.data, button.displayOrder)}>
-      {button.icon && <Icon icon={button.icon} type={button.iconType ?? EIconTypes.OUTLINED} opacity={EOpacity.O08} size={button.iconSize ?? DEFAULT_ICON_SIZE} defaultClass="mr4" />}
-      <span>{button.label instanceof Function ? button.label(button.data) : button.label}</span>
-    </Link>
-  ) : (
-    <button style={styles ?? { minHeight: "var(--IH)" }} className={DEFAULT_BUTTON_CLASS(button.columnSize, undefined, button.borderSize, button.background, button.defaultClass, needColumnSize)} key={button.displayOrder} type={buttonType ?? EButtonTypes.BUTTON} onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => button.onClick?.(event, event.currentTarget as HTMLElement, button.data, button.displayOrder)}>
-      {button.icon && <Icon icon={button.icon} type={button.iconType ?? EIconTypes.OUTLINED} opacity={EOpacity.O08} size={button.iconSize ?? DEFAULT_ICON_SIZE} defaultClass="mr4" />}
-      <span>{button.label instanceof Function ? button.label(button.data) : button.label}</span>
-    </button>
-  );
-};
-export const CreateButton = (param: IButton, parent?: HTMLElement | UN, styles?: React.CSSProperties | UN, needColumnSize?: boolean | UN) => {
-  const button = document.createElement(param.url ? "a" : "button");
-  button.setAttribute(COLUMN_SIZE_ATTRIBUTE_KEY, (param.columnSize ?? 12).toString());
-  if (param.icon) {
-    const icon = CreateIcon(param.icon, button, param.iconType ?? EIconTypes.OUTLINED, param.iconSize ?? DEFAULT_ICON_SIZE, null, null);
-    icon.classList.add("mr4");
-  }
-
-  SetElementStyles(button, styles);
-
-  button.className = DEFAULT_BUTTON_CLASS(param.columnSize ?? 0, 0, param.borderSize, param.background ?? NEXUS_CONFIG.DEFAULT_BACKGROUND, param.defaultClass, needColumnSize);
-  const span = document.createElement("span");
-  span.textContent = param.label instanceof Function ? (param.label(param.data) ?? null) : (param.label ?? null);
-  button.appendChild(span);
-  button.onclick = (e) => param.onClick?.(e, button, param.data, param.displayOrder);
-  button.style.height = "var(--IH)";
-
-  button.classList.add("df", "ac", "pl5", "pr5");
-
-  if (param.url) {
-    (button as HTMLAnchorElement).href = param.url;
-    (button as HTMLAnchorElement).target = param.target ?? ETargets.Blank;
-  }
-  if (parent) parent.appendChild(button);
-  return button;
-};
-export const Buttons = ({ buttons, buttonStyles, padding, border, maxHeight, boxDefaultClass, needColumnSize, pt }: { buttons: IButton[]; padding?: number; buttonStyles?: React.CSSProperties | UN; border?: number; maxHeight?: number; boxDefaultClass?: string; needColumnSize?: boolean; pt?: number }) => {
-  return (
-    <div className={`row ${maxHeight ? "sb" : ""} ${boxDefaultClass ?? ""} r sm p${padding ?? 5} b${border ?? 0} ${pt !== undefined ? `pt${pt}` : ""}`}>
-      {buttons.map((button) => (
-        <Button key={button.id} button={button} needColumnSize={needColumnSize} styles={buttonStyles} />
-      ))}
-    </div>
-  );
-};
-export const CreateButtons = (buttons: IButton[], parent?: HTMLElement | UN, buttonStyles?: React.CSSProperties | UN, columns?: number | UN, padding?: number | UN, border?: number | UN, maxHeight?: number | UN, boxDefaultClass?: string | UN, needColumnSize?: boolean | UN) => {
-  if (!buttons || buttons.length === 0) return;
-  maxHeight ??= 25;
-  const sortButtons = buttons.sort((a, b) => (a.displayOrder ?? 0) - (b.displayOrder ?? 0));
-  const buttonBox = document.createElement("div");
-  if (maxHeight) buttonBox.style.maxHeight = `${maxHeight}rem`;
-
-  buttonBox.className = `row ${maxHeight ? "sb" : ""} ${boxDefaultClass ?? ""} r sm p${padding ?? 5} b${border ?? 0}`;
-  for (const button of sortButtons) {
-    // Set column size if valid columns provided
-    if (columns && !button.columnSize) button.columnSize = columns;
-
-    CreateButton(button, buttonBox, buttonStyles, needColumnSize);
-  }
-  if (parent) parent.appendChild(buttonBox);
-  return buttonBox;
-};
-
-interface ILinkButtonProps {
-  url: string;
-  label: string;
-  defaultClass?: string | UN;
-  linkDefaultClass?: string | UN;
-  onClicked?: ClickHandler | UN;
-  borderBottom?: boolean | UN;
-  background?: EBackgrounds | UN;
-  target?: ETargets | UN;
-  position?: EFlexPositions | UN;
-}
-
-const _getPDefaultClass = (defaultClass?: string | UN, position?: EFlexPositions | UN) => `${defaultClass ?? ""} df ${position ?? EFlexPositions.Center}`;
-const _getLinkDefaultClass = (linkDefaultClass?: string | UN, background?: EBackgrounds | UN) => `${background ?? EBackgrounds.Background1} ${linkDefaultClass ?? "o08 ho1"} db h p2 r`;
-const _getLinkDefaultStyle = (borderBottom?: boolean | UN) => (borderBottom ? DEFAULT_LINK_BUTTON_STYLE : { width: "fit-content" });
-
-export const LinkButton = ({ url, label, defaultClass, linkDefaultClass, onClicked, borderBottom, background, target, position }: Readonly<ILinkButtonProps>) => {
-  return (
-    <p className={_getPDefaultClass(defaultClass, position)}>
-      <Link style={_getLinkDefaultStyle(borderBottom)} onClick={onClicked ?? undefined} target={target ?? undefined} className={_getLinkDefaultClass(linkDefaultClass, background)} href={url}>
-        {label}
-      </Link>
-    </p>
-  );
-};
-
-export const CreateLinkButton = (
-  parent: HTMLElement | UN,
-  //
-  url: string,
-  label: string,
-  onClicked?: ClickHandler | UN,
-  defaultClass?: string | UN,
-  linkDefaultClass?: string | UN,
-  borderBottom?: boolean | UN,
-  background?: EBackgrounds | UN,
-  target?: ETargets | UN,
-  position?: EFlexPositions | UN,
-) => {
-  const p = document.createElement("p");
-  p.className = _getPDefaultClass(defaultClass, position);
-  const link = document.createElement("a");
-  link.href = url;
-  link.className = _getLinkDefaultClass(linkDefaultClass, background);
-  link.onclick = onClicked ?? null;
-  link.innerText = label;
-
-  if (parent) parent.appendChild(p);
-  p.appendChild(link);
-
-  if (target) link.target = target;
-  return p;
-};