@addev-be/ui 3.2.9 → 3.3.0

package/dist/components/common/TreeView/TreeContext.d.ts

@@ -0,0 +1,55 @@
+import { default as React, ReactNode } from 'react';
+type DropPosition = {
+    nodeId: string;
+    position: 'before' | 'after' | 'inside';
+} | null;
+export type DragDropType = 'none' | true | 'level';
+interface TreeContextValue {
+    idPropertyName?: string;
+    childrenPropertyName?: string;
+    displayPropertyName?: string;
+    ItemComponent?: React.FC<{
+        item: any;
+    }>;
+    expandedIds: Set<string>;
+    toggleExpand: (id: string) => void;
+    isExpanded: (id: string) => boolean;
+    draggedNodeId: string | null;
+    draggedNodeLevel: number | null;
+    dropPosition: DropPosition;
+    dragDropType: DragDropType;
+    handleDragStart: (e: React.DragEvent, nodeId: string, content: string, level: number) => void;
+    handleDragOver: (e: React.DragEvent, nodeId: string, level: number, isLastChild: boolean, parentId: string | null, hasChildren: boolean) => void;
+    handleDragLeave: (e: React.DragEvent) => void;
+    handleDrop: (e: React.DragEvent) => void;
+    handleDragEnd: () => void;
+    handleDrag: (e: React.DragEvent) => void;
+}
+export declare function useTreeContext(): TreeContextValue;
+interface TreeProviderProps {
+    children: ReactNode;
+    treeId: string;
+    items: any[];
+    idPropertyName?: string;
+    childrenPropertyName?: string;
+    displayPropertyName?: string;
+    ItemComponent?: React.FC<{
+        item: any;
+    }>;
+    defaultExpanded?: boolean;
+    dragDropType?: DragDropType;
+    onItemMove?: (draggedId: string, targetId: string, position: 'before' | 'after' | 'inside') => void;
+    onItemsChanged?: (items: any[]) => void;
+    dragGhost: {
+        x: number;
+        y: number;
+        content: string;
+    } | null;
+    setDragGhost: (ghost: {
+        x: number;
+        y: number;
+        content: string;
+    } | null) => void;
+}
+export declare function TreeProvider({ children, treeId, items, idPropertyName, childrenPropertyName, displayPropertyName, ItemComponent, dragDropType, onItemMove, onItemsChanged, dragGhost, setDragGhost, }: TreeProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/common/TreeView/TreeContext.js

@@ -0,0 +1,172 @@
+import { jsx as G } from "react/jsx-runtime";
+import { createContext as y, useState as Y, useCallback as s, useContext as nn } from "react";
+const U = y(null);
+function ln() {
+  const D = nn(U);
+  if (!D)
+    throw new Error("TreeNode must be used within TreeView");
+  return D;
+}
+function an({
+  children: D,
+  treeId: d,
+  items: Q,
+  idPropertyName: x,
+  childrenPropertyName: a,
+  displayPropertyName: W,
+  ItemComponent: q,
+  dragDropType: c = "none",
+  onItemMove: X,
+  onItemsChanged: L,
+  dragGhost: R,
+  setDragGhost: r
+}) {
+  const [F, z] = Y(() => /* @__PURE__ */ new Set()), [u, C] = Y(null), [I, k] = Y(null), [A, l] = Y(null), H = s(
+    (n, e, t) => {
+      if (!L) return;
+      const f = structuredClone(Q), p = (o) => x && o[x] ? String(o[x]) : String(o), v = (o, h) => {
+        for (let S = 0; S < o.length; S++) {
+          const B = o[S];
+          if (p(B) === h)
+            return { node: B, parent: o, index: S };
+          if (a && B[a]) {
+            const j = v(
+              B[a],
+              h
+            );
+            if (j) return j;
+          }
+        }
+        return null;
+      }, g = v(f, n);
+      if (!g || !g.parent) return;
+      const {
+        node: T,
+        parent: b,
+        index: E
+      } = g;
+      b.splice(E, 1);
+      const i = v(f, e);
+      if (!i) return;
+      const {
+        node: w,
+        parent: O,
+        index: V
+      } = i;
+      if (t === "inside")
+        a && (w[a] || (w[a] = []), w[a].push(T));
+      else {
+        if (!O) return;
+        const o = t === "before" ? V : V + 1;
+        O.splice(o, 0, T);
+      }
+      L(f);
+    },
+    [Q, x, a, L]
+  ), J = s((n) => {
+    z((e) => {
+      const t = new Set(e);
+      return t.has(n) ? t.delete(n) : t.add(n), t;
+    });
+  }, []), K = s(
+    (n) => F.has(n),
+    [F]
+  ), M = s(
+    (n, e, t, f) => {
+      if (c === "none") {
+        n.preventDefault();
+        return;
+      }
+      C(e), k(f), n.dataTransfer.setData("text/plain", d), n.dataTransfer.setData("application/x-tree-id", d);
+      const p = new Image();
+      p.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=", n.dataTransfer.effectAllowed = "move", n.dataTransfer.setDragImage(p, 0, 0), r({ x: n.clientX, y: n.clientY, content: t });
+    },
+    [d, r, c]
+  ), Z = s(
+    (n, e, t, f, p, v) => {
+      n.preventDefault(), n.stopPropagation();
+      const g = n.dataTransfer.types.includes(
+        "application/x-tree-id"
+      ) ? n.dataTransfer.getData("application/x-tree-id") || n.dataTransfer.getData("text/plain") : null;
+      if (g && g !== d) {
+        l(null);
+        return;
+      }
+      if (u === e) {
+        l(null);
+        return;
+      }
+      if (u && e.startsWith(u + "-")) {
+        l(null);
+        return;
+      }
+      if (c === "level" && I !== null && I !== t) {
+        l(null);
+        return;
+      }
+      const T = n.currentTarget.getBoundingClientRect(), b = n.clientY - T.top, E = T.height;
+      let i;
+      if (v) {
+        const w = E * 0.4;
+        b < w ? i = "before" : i = "inside";
+      } else
+        b < E / 2 ? i = "before" : i = "after";
+      if (c === "level" && i === "inside") {
+        l(null);
+        return;
+      }
+      l({ nodeId: e, position: i });
+    },
+    [d, u, c, I]
+  ), _ = s((n) => {
+    n.preventDefault();
+    const e = n.relatedTarget;
+    (!e || !n.currentTarget.contains(e)) && l(null);
+  }, []), $ = s(
+    (n) => {
+      if (n.preventDefault(), n.stopPropagation(), (n.dataTransfer.getData("application/x-tree-id") || n.dataTransfer.getData("text/plain")) !== d) {
+        C(null), l(null), r(null);
+        return;
+      }
+      u && A && (X || H)(u, A.nodeId, A.position), C(null), l(null), r(null);
+    },
+    [
+      d,
+      u,
+      A,
+      X,
+      H,
+      r
+    ]
+  ), m = s(() => {
+    C(null), k(null), l(null), r(null);
+  }, [r]), P = s(
+    (n) => {
+      n.clientX === 0 && n.clientY === 0 || R && r({ ...R, x: n.clientX, y: n.clientY });
+    },
+    [R, r]
+  ), N = {
+    idPropertyName: x,
+    childrenPropertyName: a,
+    displayPropertyName: W,
+    ItemComponent: q,
+    expandedIds: F,
+    toggleExpand: J,
+    isExpanded: K,
+    draggedNodeId: u,
+    draggedNodeLevel: I,
+    dropPosition: A,
+    dragDropType: c,
+    handleDragStart: M,
+    handleDragOver: Z,
+    handleDragLeave: _,
+    handleDrop: $,
+    handleDragEnd: m,
+    handleDrag: P
+  };
+  return /* @__PURE__ */ G(U.Provider, { value: N, children: D });
+}
+export {
+  an as TreeProvider,
+  ln as useTreeContext
+};

package/dist/components/common/TreeView/TreeView.d.ts

@@ -0,0 +1,19 @@
+import { DragDropType } from './TreeContext';
+import { FC, HTMLAttributes } from 'react';
+export interface TreeViewProps<TItem> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    items: TItem[];
+    idPropertyName?: keyof TItem & string;
+    childrenPropertyName?: keyof TItem & string;
+    itemComponent?: FC<{
+        item: TItem;
+    }>;
+    displayPropertyName?: keyof TItem & string;
+    defaultExpanded?: boolean;
+    dragDropType?: DragDropType;
+    onItemMove?: (draggedId: string, targetId: string, position: 'before' | 'after' | 'inside') => void;
+    onItemsChanged?: (items: TItem[]) => void;
+}
+export declare function TreeView<TItem>({ items, idPropertyName, childrenPropertyName, itemComponent: ItemComponent, displayPropertyName, defaultExpanded, dragDropType, onItemMove, onItemsChanged, className, ...props }: TreeViewProps<TItem>): import("react/jsx-runtime").JSX.Element;
+export declare namespace TreeView {
+    var displayName: string;
+}

package/dist/components/common/TreeView/TreeView.js

@@ -0,0 +1,202 @@
+import { jsxs as C, jsx as n } from "react/jsx-runtime";
+import { TreeProvider as _, useTreeContext as B } from "./TreeContext.js";
+import q, { useState as F } from "react";
+import H from "../../../assets/icons/chevron-right.svg.js";
+import { cn as u } from "../../../helpers/cn.js";
+function J(r, e) {
+  if (!e) return [];
+  const t = r[e];
+  return Array.isArray(t) ? t : [];
+}
+function K(r, e) {
+  if (!e) return String(r);
+  const t = r[e];
+  return t != null ? String(t) : "";
+}
+function z(r, e, t) {
+  if (e) {
+    const o = r[e];
+    if (o != null) return String(o);
+  }
+  return t || String(r);
+}
+function E({
+  item: r,
+  id: e,
+  parentId: t,
+  level: o,
+  isLastChild: c,
+  verticalLines: f
+}) {
+  const {
+    idPropertyName: m,
+    childrenPropertyName: b,
+    displayPropertyName: v,
+    ItemComponent: s,
+    isExpanded: D,
+    toggleExpand: a,
+    draggedNodeId: x,
+    dropPosition: i,
+    dragDropType: d,
+    handleDragStart: g,
+    handleDragOver: h,
+    handleDragLeave: y,
+    handleDrop: S,
+    handleDragEnd: P,
+    handleDrag: V
+  } = B(), N = J(r, b), p = N.length > 0, L = D(e), j = x === e, w = i?.nodeId === e, A = w && i?.position === "before", $ = w && i?.position === "after", G = w && i?.position === "inside", I = s ? /* @__PURE__ */ n(s, { item: r }) : K(r, v);
+  return /* @__PURE__ */ C("div", { className: o > 1 ? "ml-4" : "", children: [
+    /* @__PURE__ */ C(
+      "div",
+      {
+        draggable: d !== "none",
+        onDragStart: (l) => g(
+          l,
+          e,
+          typeof I == "string" ? I : String(r),
+          o
+        ),
+        onDragOver: (l) => h(l, e, o, c, t, p),
+        onDragLeave: y,
+        onDrop: S,
+        onDragEnd: P,
+        onDrag: V,
+        className: u(
+          "flex items-center gap-1 py-1.5 pr-theme-sm transition-colors pl-2",
+          "hover:bg-accent/50 text-foreground group",
+          "font-theme text-theme-sm relative",
+          d !== "none" && (j ? "opacity-40 cursor-grabbing" : "cursor-grab"),
+          G && "bg-accent/70 ring-2 ring-accent ring-inset"
+        ),
+        children: [
+          A && /* @__PURE__ */ n("div", { className: "absolute right-0 top-0 h-0.5 bg-primary z-20 left-4" }),
+          $ && /* @__PURE__ */ n("div", { className: "absolute right-0 bottom-0 h-0.5 bg-primary z-20 left-4" }),
+          o > 1 && /* @__PURE__ */ n(
+            "div",
+            {
+              className: u(
+                "absolute h-px bg-border/60 left-0 top-1/2",
+                p ? "w-2.5" : "w-6"
+              )
+            }
+          ),
+          p ? /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              onClick: () => a(e),
+              className: "flex items-center justify-center w-5 h-5 hover:bg-accent/50 rounded transition-all shrink-0 relative z-10",
+              children: /* @__PURE__ */ n(
+                H,
+                {
+                  className: u(
+                    "w-3.5 h-3.5 text-muted-foreground transition-transform duration-200",
+                    L && "rotate-90"
+                  )
+                }
+              )
+            }
+          ) : /* @__PURE__ */ n("span", { className: "w-5 shrink-0" }),
+          /* @__PURE__ */ n("div", { className: "flex-1 min-w-0", children: s ? /* @__PURE__ */ n(s, { item: r }) : /* @__PURE__ */ n("span", { className: "truncate block", children: I }) })
+        ]
+      }
+    ),
+    p && L && /* @__PURE__ */ n("div", { className: "relative before:absolute before:w-px before:top-0 before:left-4 before:bottom-4 before:bg-border/60", children: N.map((l, T) => {
+      const k = z(l, m, `${e}-${T}`), O = T === N.length - 1, R = [
+        ...f,
+        c ? "none" : "line"
+      ];
+      return /* @__PURE__ */ n(
+        E,
+        {
+          item: l,
+          id: k,
+          parentId: e,
+          level: o + 1,
+          isLastChild: O,
+          verticalLines: R
+        },
+        k
+      );
+    }) })
+  ] });
+}
+function M({
+  items: r,
+  idPropertyName: e,
+  childrenPropertyName: t,
+  itemComponent: o,
+  displayPropertyName: c,
+  defaultExpanded: f = !1,
+  dragDropType: m = "none",
+  onItemMove: b,
+  onItemsChanged: v,
+  className: s,
+  ...D
+}) {
+  const [a, x] = F(null), i = q.useId();
+  return /* @__PURE__ */ C(
+    _,
+    {
+      treeId: i,
+      items: r,
+      idPropertyName: e,
+      childrenPropertyName: t,
+      displayPropertyName: c,
+      ItemComponent: o,
+      defaultExpanded: f,
+      dragDropType: m,
+      onItemMove: b,
+      onItemsChanged: v,
+      dragGhost: a,
+      setDragGhost: x,
+      children: [
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: u(
+              "border border-border bg-card overflow-hidden",
+              "py-theme-xs rounded-theme-md",
+              s
+            ),
+            ...D,
+            children: r.map((d, g) => {
+              const h = z(
+                d,
+                e,
+                `${g}`
+              ), y = g === r.length - 1;
+              return /* @__PURE__ */ n(
+                E,
+                {
+                  item: d,
+                  id: h,
+                  parentId: null,
+                  level: 1,
+                  isLastChild: y,
+                  verticalLines: ["none"]
+                },
+                h
+              );
+            })
+          }
+        ),
+        a && /* @__PURE__ */ n(
+          "div",
+          {
+            className: "fixed pointer-events-none z-50 bg-card border border-border rounded px-3 py-1.5 shadow-lg opacity-70",
+            style: {
+              left: a.x + 10,
+              top: a.y + 10
+            },
+            children: /* @__PURE__ */ n("span", { className: "text-sm text-foreground", children: a.content })
+          }
+        )
+      ]
+    }
+  );
+}
+M.displayName = "TreeView";
+export {
+  M as TreeView
+};

package/dist/components/common/TreeView/index.d.ts

@@ -0,0 +1,3 @@
+export { TreeView } from './TreeView';
+export type { TreeViewProps } from './TreeView';
+export { TreeProvider, useTreeContext } from './TreeContext';

package/dist/components/common/index.d.ts

@@ -1,7 +1,10 @@
+export * from './Accordion';
 export * from './Avatar';
 export * from './Card';
 export * from './ContextMenu';
 export * from './Ellipsis';
 export * from './Label';
 export * from './Message';
+export * from './PropertiesList';
 export * from './TabsView';
+export * from './TreeView';

package/dist/components/common/index.js

@@ -1,20 +1,29 @@
-import { Avatar as o } from "./Avatar/index.js";
-import { Card as a } from "./Card/index.js";
-import { ContextMenu as p, ParentMenuItem as x } from "./ContextMenu/index.js";
-import { Ellipsis as s } from "./Ellipsis.js";
-import { Label as b, StyledLabel as i } from "./Label.js";
+import { Accordion as o } from "./Accordion/Accordion.js";
+import { Avatar as p } from "./Avatar/index.js";
+import { Card as m } from "./Card/index.js";
+import { ContextMenu as s, ParentMenuItem as a } from "./ContextMenu/index.js";
+import { Ellipsis as n } from "./Ellipsis.js";
+import { Label as T, StyledLabel as b } from "./Label.js";
 import { Message as L } from "./Message/index.js";
-import { TabsView as d } from "./TabsView/TabsView.js";
-import { TabsList as C } from "./TabsView/TabsList.js";
+import { PropertiesList as C } from "./PropertiesList/index.js";
+import { TabsView as P } from "./TabsView/TabsView.js";
+import { TabsList as v } from "./TabsView/TabsList.js";
+import { TreeView as A } from "./TreeView/TreeView.js";
+import { TreeProvider as g, useTreeContext as y } from "./TreeView/TreeContext.js";
 export {
-  o as Avatar,
-  a as Card,
-  p as ContextMenu,
-  s as Ellipsis,
-  b as Label,
+  o as Accordion,
+  p as Avatar,
+  m as Card,
+  s as ContextMenu,
+  n as Ellipsis,
+  T as Label,
   L as Message,
-  x as ParentMenuItem,
-  i as StyledLabel,
-  C as TabsList,
-  d as TabsView
+  a as ParentMenuItem,
+  C as PropertiesList,
+  b as StyledLabel,
+  v as TabsList,
+  P as TabsView,
+  g as TreeProvider,
+  A as TreeView,
+  y as useTreeContext
 };

package/dist/components/grid/DataGrid/DataGridCell.js

@@ -1,57 +1,58 @@
-import { jsx as f } from "react/jsx-runtime";
+import { jsx as $ } from "react/jsx-runtime";
 import { DataGridCell as S } from "./styles.js";
-import { useMemo as A, useCallback as R } from "react";
-import { DataGridEditableCell as c } from "./DataGridEditableCell/index.js";
+import { useMemo as c, useCallback as A } from "react";
+import { DataGridEditableCell as R } from "./DataGridEditableCell/index.js";
 import { useDataGridContext as j } from "./hooks/index.js";
-const v = (e) => e ? String(e) : "", z = ({
+const v = (e) => e ? String(e) : "", B = ({
   row: e,
   rowIndex: i,
-  columnKey: D,
+  columnKey: b,
   columnIndex: a,
   column: t,
   context: s,
-  style: b
+  style: f
 }) => {
   const {
-    name: o,
+    name: D,
     editable: g,
-    editingCell: C = [-1, -1],
-    setEditingCell: p,
+    editingCell: o = [-1, -1],
+    setEditingCell: C,
     onRowDoubleClick: d,
-    userSelect: $,
-    headerColor: n
-  } = j(s), r = !!g && "editable" in t && !!t.editable && !!t.editComponent, G = r && C[0] === i && C[1] === a, E = t.component ?? S, h = A(() => t.getter(e), [t, e]), k = R(
-    (l) => {
-      l.stopPropagation(), l.preventDefault(), r ? p([i, a]) : d?.(e, l);
+    userSelect: p,
+    headerColor: G
+  } = j(s), l = !!g && "editable" in t && !!t.editable && !!t.editComponent, E = l && o[0] === i && o[1] === a, h = t.component ?? S, k = c(() => t.getter(e), [t, e]), n = A(
+    (r) => {
+      r.stopPropagation(), r.preventDefault(), l ? C([i, a]) : d?.(e, r);
     },
-    [a, r, d, e, i, p]
+    [a, l, d, e, i, C]
   );
-  return G ? /* @__PURE__ */ f(
-    c,
+  return E ? /* @__PURE__ */ $(
+    R,
     {
       row: e,
       rowIndex: i,
-      columnKey: D,
+      columnKey: b,
       columnIndex: a,
       column: t,
       context: s,
-      userSelect: $
+      userSelect: p
     },
-    `${o}-${i}-${a}`
-  ) : /* @__PURE__ */ f(
-    E,
+    `editable-cell-${i}-${a}`
+  ) : /* @__PURE__ */ $(
+    h,
     {
-      onDoubleClick: k,
-      style: b,
-      $userSelect: $,
+      "data-testid": `cell-${i}-${a}`,
+      onDoubleClick: n,
+      style: f,
+      $userSelect: p,
       $color: t.color,
       $textAlign: t.textAlign,
-      $headerColor: n,
-      children: (t.render ?? v)(h, e, t)
+      $headerColor: G,
+      children: (t.render ?? v)(k, e, t)
     },
-    `${o}-${i}-${a}`
+    `${D}-${i}-${a}`
   );
 };
 export {
-  z as DataGridCell
+  B as DataGridCell
 };

package/dist/components/grid/DataGrid/DataGridEditableCell/index.d.ts

@@ -1,2 +1,2 @@
 import { EditableDataGridCellProps } from '../types';
-export declare const DataGridEditableCell: <R, T>({ row, columnKey, column, context, }: EditableDataGridCellProps<R, T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGridEditableCell: <R, T>({ row, columnKey, column, context, rowIndex, columnIndex, }: EditableDataGridCellProps<R, T>) => import("react/jsx-runtime").JSX.Element;