@addev-be/ui 3.2.9 → 3.3.0

package/dist/components/grid/DataGrid/DataGridEditableCell/index.js

@@ -1,64 +1,74 @@
 import { jsx as x } from "react/jsx-runtime";
-import { useMemo as I, useState as v, useRef as A, useCallback as p, useEffect as D } from "react";
-import { EditableCellContainer as M } from "./styles.js";
-import { useDataGridContext as V } from "../hooks/index.js";
-const S = ({
+import { useMemo as I, useState as A, useRef as D, useCallback as p, useEffect as M } from "react";
+import { EditableCellContainer as V } from "./styles.js";
+import { useDataGridContext as j } from "../hooks/index.js";
+const q = ({
   row: e,
   columnKey: s,
   column: t,
-  context: a
+  context: a,
+  rowIndex: G,
+  columnIndex: T
 }) => {
-  const { setEditingCell: u, setRows: C, editRow: R, rows: w, rowKeyGetter: l } = V(a), f = I(() => t.getter(e), [t, e]), [o, G] = v(f), r = A(null), d = l(e), T = p(
-    (n, i, c) => ({ Id: n, [s]: c }),
+  const { setEditingCell: u, setRows: C, editRow: R, rows: w, rowKeyGetter: l } = j(a), d = I(() => t.getter(e), [t, e]), [o, P] = A(d), r = D(null), f = l(e), $ = p(
+    (i, n, c) => ({ Id: i, [s]: c }),
     [s]
-  ), E = "itemToPartialRow" in t && t.itemToPartialRow || T, b = p(() => {
-    const n = w.findIndex((i) => l(i) === d);
-    if (n >= 0) {
-      const i = E(d, e, o), c = {
+  ), b = "itemToPartialRow" in t && t.itemToPartialRow || $, E = p(() => {
+    const i = w.findIndex((n) => l(n) === f);
+    if (i >= 0) {
+      const n = b(f, e, o), c = {
         ...e,
-        ...i
+        ...n
       };
-      R(i), C?.((h) => {
-        const m = [...h];
-        return m[n] = c, m;
+      R(n), C?.((v) => {
+        const m = [...v];
+        return m[i] = c, m;
       });
     }
   }, [
     R,
-    E,
+    b,
     e,
-    d,
+    f,
     l,
     w,
     C,
     o
   ]), g = p(
-    (n, i = [-1, -1]) => {
-      n && o !== f && b(), u(i);
+    (i, n = [-1, -1]) => {
+      i && o !== d && E(), u(n);
     },
-    [f, b, u, o]
+    [d, E, u, o]
   );
-  D(() => {
+  M(() => {
     r.current && (r.current.focus(), r.current instanceof HTMLInputElement && r.current.select());
   }, [r]);
-  const P = I(() => {
+  const h = I(() => {
     if (!("editable" in t) || !t.editable || !t.editComponent)
       return null;
-    const n = t.editComponent;
+    const i = t.editComponent;
     return /* @__PURE__ */ x(
-      n,
+      i,
       {
         row: e,
         ref: r,
         value: o,
-        onChange: G,
+        onChange: P,
         onClose: g,
         context: a
       }
     );
   }, [t, a, g, e, o]);
-  return /* @__PURE__ */ x(M, { $textAlign: t.textAlign, children: P }, s);
+  return /* @__PURE__ */ x(
+    V,
+    {
+      "data-testid": `editable-cell-${G}-${T}`,
+      $textAlign: t.textAlign,
+      children: h
+    },
+    s
+  );
 };
 export {
-  S as DataGridEditableCell
+  q as DataGridEditableCell
 };

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

@@ -3,71 +3,86 @@ import { DataGridRow as m, LoadingCell as p, SelectionCell as b } from "./styles
 import { DataGridCell as f } from "./DataGridCell.js";
 import { useContext as k } from "react";
 const R = ({
-  item: t,
-  index: r,
-  context: i
+  item: a,
+  index: o,
+  context: r
 }) => {
   const {
-    visibleColumns: d,
-    rowKeyGetter: c,
+    visibleColumns: c,
+    rowKeyGetter: d,
     toggleSelection: u,
     updatedRows: y,
     addedRows: h,
-    ...a
-  } = k(i);
-  if (!t)
-    return /* @__PURE__ */ n(m, { children: [
-      !!a.selectable && /* @__PURE__ */ s(p, { className: "animate-pulse", children: /* @__PURE__ */ s("div", {}) }),
-      d.map((e, o) => /* @__PURE__ */ s(
-        p,
-        {
-          className: "animate-pulse",
-          children: /* @__PURE__ */ s("div", {})
-        },
-        `loading-${r}-${o}`
-      ))
-    ] }, `loading-row-${r}`);
-  const l = c(t), w = a.selectedKeys.includes(l), { className: C, style: g } = a.rowClassNameGetter?.(t) ?? {
+    ...i
+  } = k(r);
+  if (!a)
+    return /* @__PURE__ */ n(
+      m,
+      {
+        "data-testid": `loading-row-${o}`,
+        children: [
+          !!i.selectable && /* @__PURE__ */ s(p, { className: "animate-pulse", children: /* @__PURE__ */ s("div", {}) }),
+          c.map((e, l) => /* @__PURE__ */ s(
+            p,
+            {
+              className: "animate-pulse",
+              children: /* @__PURE__ */ s("div", {})
+            },
+            `loading-${o}-${l}`
+          ))
+        ]
+      },
+      `loading-row-${o}`
+    );
+  const t = d(a), $ = i.selectedKeys.includes(t), { className: g, style: w } = i.rowClassNameGetter?.(a) ?? {
     className: "",
     style: void 0
-  }, _ = h.some((e) => c(e) === l), $ = y.some(
-    (e) => c(e) === l
+  }, C = h.some((e) => d(e) === t), _ = y.some(
+    (e) => d(e) === t
   );
-  return /* @__PURE__ */ n(m, { $edited: _ || $, children: [
-    !!a.selectable && /* @__PURE__ */ s(
-      b,
-      {
-        onClick: () => u(l),
-        children: /* @__PURE__ */ s(
-          "input",
+  return /* @__PURE__ */ n(
+    m,
+    {
+      $edited: C || _,
+      "data-testid": `row-${o}`,
+      children: [
+        !!i.selectable && /* @__PURE__ */ s(
+          b,
           {
-            type: "checkbox",
-            value: l,
-            checked: w,
-            readOnly: !0
-          }
-        )
-      },
-      "__select_checkbox__"
-    ),
-    d.map((e, o) => (
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      /* @__PURE__ */ s(
-        f,
-        {
-          ...o === 0 ? { className: C, style: g } : {},
-          row: t,
-          rowIndex: r,
-          column: e,
-          columnIndex: o,
-          context: i,
-          columnKey: e.key,
-          color: e.color
-        },
-        `loading-${o}-${o}`
-      )
-    ))
-  ] }, l);
+            onClick: () => u(t),
+            children: /* @__PURE__ */ s(
+              "input",
+              {
+                type: "checkbox",
+                value: t,
+                checked: $,
+                readOnly: !0
+              }
+            )
+          },
+          "__select_checkbox__"
+        ),
+        c.map((e, l) => (
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          /* @__PURE__ */ s(
+            f,
+            {
+              ...l === 0 ? { className: g, style: w } : {},
+              row: a,
+              rowIndex: o,
+              column: e,
+              columnIndex: l,
+              context: r,
+              columnKey: e.key,
+              color: e.color
+            },
+            `loading-${l}-${l}`
+          )
+        ))
+      ]
+    },
+    t
+  );
 };
 export {
   R as DataGridRowTemplate

package/dist/components/layout/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,42 @@
+import { default as React, HTMLAttributes } from 'react';
+export declare const GlobalContextMenuProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export interface ContextMenuProps {
+    children: React.ReactNode;
+}
+export declare const ContextMenu: React.FC<ContextMenuProps>;
+export interface ContextMenuTriggerProps extends HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export declare const ContextMenuTrigger: React.ForwardRefExoticComponent<ContextMenuTriggerProps & React.RefAttributes<HTMLDivElement>>;
+export interface ContextMenuContentProps extends HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export declare const ContextMenuContent: React.ForwardRefExoticComponent<ContextMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface ContextMenuItemProps extends HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    disabled?: boolean;
+    onSelect?: () => void;
+}
+export declare const ContextMenuItem: React.ForwardRefExoticComponent<ContextMenuItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface ContextMenuSeparatorProps extends HTMLAttributes<HTMLDivElement> {
+}
+export declare const ContextMenuSeparator: React.ForwardRefExoticComponent<ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export interface ContextMenuLabelProps extends HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export declare const ContextMenuLabel: React.ForwardRefExoticComponent<ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>>;
+export interface ContextMenuSubProps {
+    children: React.ReactNode;
+}
+export declare const ContextMenuSub: React.FC<ContextMenuSubProps>;
+export interface ContextMenuSubTriggerProps extends HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    disabled?: boolean;
+}
+export declare const ContextMenuSubTrigger: React.ForwardRefExoticComponent<ContextMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
+export interface ContextMenuSubContentProps extends HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export declare const ContextMenuSubContent: React.ForwardRefExoticComponent<ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/ContextMenu/ContextMenu.js

@@ -0,0 +1,252 @@
+import { jsx as l, jsxs as k } from "react/jsx-runtime";
+import p, { createContext as M, useRef as w, useEffect as C, useState as g, useContext as b } from "react";
+import { cn as f } from "../../../helpers/cn.js";
+const N = M(void 0), Z = ({ children: t }) => {
+  const [r, n] = g(null);
+  return C(() => {
+    const e = () => n(null);
+    return document.addEventListener("click", e), () => document.removeEventListener("click", e);
+  }, []), /* @__PURE__ */ l(
+    N.Provider,
+    {
+      value: { currentMenuId: r, setCurrentMenuId: n },
+      children: t
+    }
+  );
+}, O = () => {
+  const t = b(N);
+  if (!t)
+    throw new Error(
+      "ContextMenu must be used within GlobalContextMenuProvider"
+    );
+  return t;
+}, S = M(
+  void 0
+), y = () => {
+  const t = b(S);
+  if (!t)
+    throw new Error("ContextMenu components must be used within a ContextMenu");
+  return t;
+};
+let j = 0;
+const q = ({ children: t }) => {
+  const { currentMenuId: r, setCurrentMenuId: n } = O(), [e] = g(() => `context-menu-${j++}`), [i, c] = g({ x: 0, y: 0 }), s = r === e, o = (x, u) => {
+    c({ x, y: u }), n(e);
+  }, d = () => {
+    r === e && n(null);
+  };
+  return /* @__PURE__ */ l(
+    S.Provider,
+    {
+      value: { menuId: e, isOpen: s, position: i, openMenu: o, closeMenu: d },
+      children: t
+    }
+  );
+}, z = p.forwardRef(({ children: t, className: r, ...n }, e) => {
+  const { openMenu: i } = y();
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      ref: e,
+      onContextMenu: (s) => {
+        s.preventDefault(), i(s.clientX, s.clientY);
+      },
+      className: f("cursor-pointer", r),
+      ...n,
+      children: t
+    }
+  );
+});
+z.displayName = "ContextMenuTrigger";
+const B = p.forwardRef(({ children: t, className: r, ...n }, e) => {
+  const { isOpen: i, position: c } = y(), s = w(null);
+  return C(() => {
+    if (i && s.current) {
+      const o = s.current.getBoundingClientRect(), d = window.innerWidth, x = window.innerHeight;
+      let u = c.x, a = c.y;
+      c.x + o.width > d && (u = d - o.width - 10), c.y + o.height > x && (a = x - o.height - 10), s.current.style.left = `${u}px`, s.current.style.top = `${a}px`;
+    }
+  }, [i, c]), i ? /* @__PURE__ */ l(
+    "div",
+    {
+      ref: (o) => {
+        typeof e == "function" ? e(o) : e && (e.current = o), s.current = o;
+      },
+      className: f(
+        "fixed z-50 min-w-[12rem] bg-popover text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95",
+        "rounded-theme-md p-theme-xs",
+        r
+      ),
+      onClick: (o) => o.stopPropagation(),
+      ...n,
+      children: t
+    }
+  ) : null;
+});
+B.displayName = "ContextMenuContent";
+const G = p.forwardRef(({ children: t, className: r, disabled: n, onSelect: e, ...i }, c) => {
+  const { closeMenu: s } = y(), o = () => {
+    !n && e && (e(), s());
+  };
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      ref: c,
+      className: f(
+        "relative flex cursor-pointer select-none items-center text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+        "px-theme-sm py-theme-xs rounded-theme-sm",
+        n && "pointer-events-none opacity-50",
+        r
+      ),
+      onClick: o,
+      ...i,
+      children: t
+    }
+  );
+});
+G.displayName = "ContextMenuItem";
+const H = p.forwardRef(({ className: t, ...r }, n) => /* @__PURE__ */ l(
+  "div",
+  {
+    ref: n,
+    className: f("bg-border h-px my-theme-xs", t),
+    ...r
+  }
+));
+H.displayName = "ContextMenuSeparator";
+const W = p.forwardRef(({ children: t, className: r, ...n }, e) => /* @__PURE__ */ l(
+  "div",
+  {
+    ref: e,
+    className: f(
+      "font-semibold text-foreground px-theme-sm py-theme-xs text-theme-sm",
+      r
+    ),
+    ...n,
+    children: t
+  }
+));
+W.displayName = "ContextMenuLabel";
+const E = M(
+  void 0
+), L = () => {
+  const t = b(E);
+  if (!t)
+    throw new Error("SubMenu components must be used within a ContextMenuSub");
+  return t;
+}, A = ({ children: t }) => {
+  const [r, n] = g(!1), e = w(null), i = () => {
+    e.current && (clearTimeout(e.current), e.current = null), n(!0);
+  }, c = () => {
+    e.current = setTimeout(() => {
+      n(!1), e.current = null;
+    }, 150);
+  };
+  return C(() => () => {
+    e.current && clearTimeout(e.current);
+  }, []), /* @__PURE__ */ l(E.Provider, { value: { isOpen: r, openSubMenu: i, closeSubMenu: c }, children: /* @__PURE__ */ l("div", { className: "relative w-full", children: t }) });
+}, $ = p.forwardRef(({ children: t, className: r, disabled: n, ...e }, i) => {
+  const { openSubMenu: c } = L();
+  return /* @__PURE__ */ k(
+    "div",
+    {
+      ref: i,
+      className: f(
+        "flex cursor-pointer select-none items-center justify-between text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+        "px-theme-sm py-theme-xs rounded-theme-sm",
+        n && "pointer-events-none opacity-50",
+        r
+      ),
+      onMouseEnter: c,
+      onClick: (s) => s.stopPropagation(),
+      ...e,
+      children: [
+        t,
+        /* @__PURE__ */ l(
+          "svg",
+          {
+            width: "15",
+            height: "15",
+            viewBox: "0 0 15 15",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            className: "ml-auto",
+            children: /* @__PURE__ */ l(
+              "path",
+              {
+                d: "M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z",
+                fill: "currentColor",
+                fillRule: "evenodd",
+                clipRule: "evenodd"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+$.displayName = "ContextMenuSubTrigger";
+const X = p.forwardRef(({ children: t, className: r, ...n }, e) => {
+  const { isOpen: i, openSubMenu: c, closeSubMenu: s } = L(), o = w(null), [d, x] = g({});
+  return C(() => {
+    const u = (m) => {
+      if (o.current && !o.current.contains(m.relatedTarget)) {
+        const v = o.current.parentElement;
+        v && !v.contains(m.relatedTarget) && s();
+      }
+    }, a = o.current?.parentElement;
+    if (a)
+      return a.addEventListener("mouseleave", u), () => a.removeEventListener("mouseleave", u);
+  }, [s]), C(() => {
+    if (i && o.current) {
+      const u = o.current.getBoundingClientRect(), a = o.current.parentElement;
+      if (a) {
+        const m = a.getBoundingClientRect(), v = window.innerWidth, R = window.innerHeight, P = v - m.right, T = m.left, h = {};
+        if (P >= u.width + 8 ? h.left = "100%" : T >= u.width + 8 ? h.right = "100%" : h.left = "100%", m.top + u.height > R) {
+          const I = Math.max(
+            0,
+            R - u.height - 10
+          );
+          h.top = `${I - m.top}px`;
+        } else
+          h.top = "0";
+        x(h);
+      }
+    }
+  }, [i]), i ? /* @__PURE__ */ l(
+    "div",
+    {
+      ref: (u) => {
+        typeof e == "function" ? e(u) : e && (e.current = u), o.current = u;
+      },
+      className: f(
+        "absolute min-w-[12rem] overflow-hidden bg-popover text-popover-foreground shadow-lg border border-border animate-in fade-in-0 zoom-in-95 z-50",
+        "rounded-theme-md p-theme-xs",
+        r
+      ),
+      style: {
+        left: d.left,
+        right: d.right,
+        top: d.top || "0"
+      },
+      onMouseEnter: c,
+      onClick: (u) => u.stopPropagation(),
+      ...n,
+      children: t
+    }
+  ) : null;
+});
+X.displayName = "ContextMenuSubContent";
+export {
+  q as ContextMenu,
+  B as ContextMenuContent,
+  G as ContextMenuItem,
+  W as ContextMenuLabel,
+  H as ContextMenuSeparator,
+  A as ContextMenuSub,
+  X as ContextMenuSubContent,
+  $ as ContextMenuSubTrigger,
+  z as ContextMenuTrigger,
+  Z as GlobalContextMenuProvider
+};

package/dist/components/layout/ContextMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { GlobalContextMenuProvider, ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuLabel, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, } from './ContextMenu';
+export type { ContextMenuProps, ContextMenuTriggerProps, ContextMenuContentProps, ContextMenuItemProps, ContextMenuSeparatorProps, ContextMenuLabelProps, ContextMenuSubProps, ContextMenuSubTriggerProps, ContextMenuSubContentProps, } from './ContextMenu';

package/dist/components/layout/LeftMenu/LeftMenu.d.ts

@@ -0,0 +1,22 @@
+import { IconFC } from '../../../icons';
+export interface LeftMenuItem {
+    id: string;
+    label: string;
+    icon?: IconFC;
+    onClick?: () => void;
+}
+export interface LeftMenuGroup {
+    title?: string;
+    items: LeftMenuItem[];
+}
+export interface LeftMenuProps {
+    header?: {
+        title: string;
+        subtitle?: string;
+    };
+    groups: LeftMenuGroup[];
+    activeItemId?: string;
+    onItemClick?: (itemId: string) => void;
+    className?: string;
+}
+export declare function LeftMenu({ header, groups, activeItemId, onItemClick, className, }: LeftMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/LeftMenu/LeftMenu.js

@@ -0,0 +1,43 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { cn as c } from "../../../helpers/cn.js";
+function b({
+  header: r,
+  groups: i,
+  activeItemId: d,
+  onItemClick: n,
+  className: m
+}) {
+  const f = (e) => {
+    e.onClick && e.onClick(), n && n(e.id);
+  };
+  return /* @__PURE__ */ o("aside", { className: c("h-full w-full bg-card flex flex-col", m), children: [
+    r && /* @__PURE__ */ o("div", { className: "p-6 border-b border-border", children: [
+      /* @__PURE__ */ t("h1", { className: "text-xl font-bold text-foreground", children: r.title }),
+      r.subtitle && /* @__PURE__ */ t("p", { className: "text-sm text-muted-foreground mt-1", children: r.subtitle })
+    ] }),
+    /* @__PURE__ */ t("nav", { className: "flex-1 overflow-y-auto p-4", children: i.map((e, s) => /* @__PURE__ */ o("div", { className: c(s > 0 && "mt-6"), children: [
+      e.title && /* @__PURE__ */ t("h3", { className: "px-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2", children: e.title }),
+      /* @__PURE__ */ t("div", { className: "space-y-1", children: e.items.map((l) => {
+        const a = l.icon;
+        return /* @__PURE__ */ o(
+          "button",
+          {
+            onClick: () => f(l),
+            className: c(
+              "w-full flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm font-medium transition-colors",
+              d === l.id ? "bg-primary text-primary-foreground" : "text-foreground hover:bg-accent hover:text-accent-foreground"
+            ),
+            children: [
+              a && /* @__PURE__ */ t(a, { className: "w-4 h-4" }),
+              l.label
+            ]
+          },
+          l.id
+        );
+      }) })
+    ] }, s)) })
+  ] });
+}
+export {
+  b as LeftMenu
+};

package/dist/components/layout/LeftMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { LeftMenu } from './LeftMenu';
+export type { LeftMenuProps, LeftMenuItem, LeftMenuGroup } from './LeftMenu';

package/dist/components/layout/PanelContainer/PanelContainer.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export interface PanelContainerProps {
+    side?: 'left' | 'right';
+    collapsible?: boolean;
+    size?: string;
+    resizable?: boolean;
+    panel: ReactNode;
+    children: ReactNode;
+    className?: string;
+    panelClassName?: string;
+    contentClassName?: string;
+    defaultCollapsed?: boolean;
+    panelOverflow?: 'auto' | 'scroll' | 'hidden' | 'visible' | 'overflow-y-auto' | 'overflow-x-auto';
+    contentOverflow?: 'auto' | 'scroll' | 'hidden' | 'visible' | 'overflow-y-auto' | 'overflow-x-auto' | 'none';
+}
+export declare function PanelContainer({ side, collapsible, size, resizable, panel, children, className, panelClassName, contentClassName, defaultCollapsed, panelOverflow, contentOverflow, }: PanelContainerProps): import("react/jsx-runtime").JSX.Element;