@progress/kendo-react-orgchart 6.1.1 → 7.0.0-develop.2

package/index.mjs

@@ -0,0 +1,1148 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as l from "react";
+import { Navigation as ue, classNames as _, kendoThemeMaps as te, guid as je, validatePackage as qe, isArray as ce, resolveItemsIds as Ve, updateItem as Xe, getNestedValue as ve } from "@progress/kendo-react-common";
+import { Card as Ze, CardBody as Je, Avatar as Qe, CardTitle as Ye, CardSubtitle as et } from "@progress/kendo-react-layout";
+import { Button as tt } from "@progress/kendo-react-buttons";
+import { minusIcon as nt, plusIcon as it } from "@progress/kendo-svg-icons";
+import * as h from "prop-types";
+import { groupBy as ot } from "@progress/kendo-data-query";
+const me = (s) => window.getComputedStyle(s).backgroundColor, st = (s) => s.toLowerCase().charCodeAt(0) - "a".charCodeAt(0), rt = (s) => {
+  const t = s.match(/series-([a-z])$/);
+  if (t !== null)
+    return st(t[1]);
+  const o = s.split("--series-")[1];
+  return parseInt(o, 10) - 1;
+}, at = 30, lt = () => {
+  let s = `
+      <div class="k-var--series-a"></div>
+      <div class="k-var--series-b"></div>
+      <div class="k-var--series-c"></div>
+      <div class="k-var--series-d"></div>
+      <div class="k-var--series-e"></div>
+      <div class="k-var--series-f"></div>
+`;
+  for (let t = 0; t < at; t++)
+    s += `
+      <div class="k-var--series-${t + 1}"></div>`;
+  return s;
+}, ct = `
+    <div class="k-var--series-unset"></div>
+    <div class="k-var--series">
+      ${lt()}
+    </div>
+`;
+class dt {
+  getSeriesColors() {
+    const t = this.element, o = [].slice.call(t.querySelectorAll(".k-var--series div")), i = me(t.querySelector(".k-var--series-unset"));
+    return o.reduce(
+      (n, r) => {
+        const a = rt(r.className), c = me(r);
+        return c !== i && (n[a] = c), n;
+      },
+      []
+      // Will populate the series colors in this array
+    );
+  }
+}
+const ht = (s, t) => {
+  const o = new dt(), i = o.element = t.createElement("div");
+  i.style.display = "none", i.innerHTML = ct, t.body.appendChild(i);
+  let e;
+  try {
+    e = o.getSeriesColors();
+  } finally {
+    t.body.removeChild(o.element), delete o.element, s(e);
+  }
+}, ut = "expanded", mt = "items", gt = "selected", pe = "checked", ft = "checkIndeterminate", vt = "k-orgchart", q = 80, Ce = 300, T = 25, O = 40, ne = 20, ie = 20, ke = 82, Y = l.createContext({
+  cardColors: void 0,
+  onExpandChange: void 0,
+  onKeyDown: void 0,
+  onItemAction: void 0,
+  onItemContextMenu: void 0,
+  onItemDoubleClick: void 0,
+  onGroupAction: void 0,
+  onGroupBlur: void 0,
+  onGroupFocus: void 0
+}), de = (s) => {
+  const t = {
+    tabIndex: 0,
+    navigatable: !0,
+    expandField: "expanded",
+    ariaLabel: "Org Chart",
+    idField: "id",
+    childrenField: "items",
+    avatarField: "avatar",
+    titleField: "title",
+    subtitleField: "subtitle",
+    ...s
+  }, {
+    navigatable: o,
+    id: i,
+    tabIndex: e,
+    className: n,
+    style: r,
+    data: a,
+    groupField: c,
+    cardWidth: m,
+    cardHeight: d,
+    groupTitleHeight: g,
+    groupSubtitleHeight: f,
+    verticalLine: u,
+    idField: k,
+    childrenField: b,
+    expandField: I,
+    hasChildrenField: R,
+    avatarField: S,
+    titleField: E,
+    subtitleField: G,
+    onExpandChange: y,
+    onItemAction: x,
+    onItemDoubleClick: B,
+    onItemContextMenu: D,
+    onKeyDown: $,
+    onGroupAction: C,
+    onGroupBlur: L,
+    onGroupFocus: W,
+    cardsColors: z,
+    ariaLabel: V,
+    itemRender: U,
+    groupTitleRender: X,
+    groupSubtitleRender: A,
+    height: ee,
+    children: j,
+    ...oe
+  } = t, Z = l.useRef(null), w = l.useRef(new ue({
+    tabIndex: e,
+    root: Z,
+    selectors: [t.groupField ? ".k-orgchart-node-group-container" : ".k-orgchart-card"],
+    focusOptions: {}
+  })), [se, Te] = l.useState([]), P = l.useRef(null), Ae = (v, p, N) => {
+    N.preventDefault(), p.focusNext(v);
+  }, Re = (v, p, N) => {
+    N.preventDefault(), p.focusPrevious(v);
+  }, He = (v, p, N, F) => {
+    var M;
+    if (N.preventDefault(), (t.groupField ? F.items.some((J) => J[t.expandField]) : F.item[t.expandField]) && t.onExpandChange)
+      t.onExpandChange.call(void 0, F);
+    else {
+      const J = ".k-orgchart-group", re = (M = v.closest(J)) == null ? void 0 : M.getAttribute("id"), Q = document.querySelector(`[aria-owns="${re}"]`);
+      Q ? p.focusElement(Q, v) : p.focusPrevious(v);
+    }
+  }, Se = (v, p, N, F) => {
+    var Q;
+    N.preventDefault();
+    const H = t.groupField ? F.items.some((K) => K[t.expandField]) : F.item[t.expandField], M = t.groupField ? F.items.find((K) => K[t.childrenField]) : F.item[t.childrenField], J = t.groupField ? F.items.some((K) => t.hasChildrenField && K[t.hasChildrenField]) : t.hasChildrenField && F.item[t.hasChildrenField], re = t.groupField ? M && M[t.childrenField] && M[t.childrenField].length : M && M.length;
+    if ((J || re) && !H && t.onExpandChange)
+      t.onExpandChange.call(void 0, F);
+    else {
+      const K = t.groupField ? ".k-orgchart-node-group-container" : ".k-orgchart-card", Ue = v.getAttribute("aria-owns"), he = (Q = document.getElementById(Ue)) == null ? void 0 : Q.querySelector(K);
+      he ? p.focusElement(he, v) : p.focusNext(v);
+    }
+  }, De = (v, p, N) => {
+    N.preventDefault(), p.focusElement(p.first, null);
+  }, Oe = (v, p, N) => {
+    N.preventDefault(), p.focusElement(p.last, null);
+  }, Ge = (v, p, N, F) => {
+    N.stopPropagation();
+    const H = v.className.indexOf("k-orgchart-node-group-container") !== -1;
+    if (s.groupField && H) {
+      P.current && P.current.first && P.current.focusElement(P.current.first, null);
+      return;
+    }
+    t.onItemAction && t.onItemAction({
+      event: N,
+      item: F.item
+    });
+  }, We = (v) => {
+    if (s.groupField) {
+      const p = v.closest(".k-orgchart-node-group-container");
+      p && w.current.focusElement(p, null);
+    }
+  };
+  l.useEffect(() => {
+    if (o && w.current.first && w.current.first.setAttribute("tabindex", String(e)), !z) {
+      const v = Z.current.ownerDocument || document;
+      ht((p) => {
+        Te(p);
+      }, v);
+    }
+  }, [o, e]);
+  const _e = (v) => {
+    if (t.navigatable) {
+      const p = v.event, N = p.key === " " ? "Space" : p.key, F = s.groupField && p.target.className.indexOf("k-orgchart-card") !== -1 && P.current || w.current, H = p.target.closest(F.selectors.join(","));
+      switch (N) {
+        case "ArrowUp":
+          He(H, F, p, v);
+          break;
+        case "ArrowDown":
+          Se(H, F, p, v);
+          break;
+        case "ArrowLeft":
+          Re(H, F, p);
+          break;
+        case "ArrowRight":
+          Ae(H, F, p);
+          break;
+        case "End":
+          Oe(H, F, p);
+          break;
+        case "Home":
+          De(H, F, p);
+          break;
+        case "Enter":
+          Ge(H, F, p, v);
+          break;
+        case "Escape":
+          We(H);
+          break;
+      }
+    }
+  }, Me = (v) => {
+    if (v.event.stopPropagation(), x && x.call(void 0, v), t.navigatable) {
+      const p = v.event.target.closest(".k-orgchart-card");
+      p && w.current.focusElement(p, null);
+    }
+  }, Pe = (v) => {
+    v.event.stopPropagation(), x && x.call(void 0, v);
+  }, Ke = (v) => {
+    v.event.stopPropagation(), x && x.call(void 0, v);
+  }, Be = (v) => {
+    if (C && C.call(void 0, v), t.navigatable) {
+      const p = v.event.target.closest(".k-orgchart-node-group-container");
+      p && w.current.focusElement(p, null);
+    }
+  }, $e = (v) => {
+    P.current = null;
+  }, ze = (v) => {
+    P.current = new ue({
+      tabIndex: 0,
+      root: v.containerRef,
+      selectors: [".k-orgchart-card"],
+      focusOptions: {}
+    });
+  };
+  return /* @__PURE__ */ l.createElement(
+    "div",
+    {
+      style: r,
+      ref: Z,
+      className: _(
+        n,
+        vt
+      )
+    },
+    /* @__PURE__ */ l.createElement(Y.Provider, { value: {
+      cardColors: z || se,
+      onExpandChange: s.onExpandChange,
+      onKeyDown: _e,
+      onItemAction: Me,
+      onItemDoubleClick: Ke,
+      onItemContextMenu: Pe,
+      onGroupAction: Be,
+      onGroupBlur: $e,
+      onGroupFocus: ze
+    }, ...oe }, s.children)
+  );
+};
+de.propTypes = {
+  className: h.string,
+  style: h.object,
+  id: h.string,
+  ariaLabel: h.string,
+  idField: h.string,
+  childrenField: h.string,
+  expandField: h.string,
+  titleField: h.string,
+  hasChildrenField: h.string,
+  subtitleField: h.string,
+  avatarField: h.string,
+  cardsColors: h.array,
+  data: h.array,
+  groupField: h.string,
+  cardHeight: h.number,
+  cardWidth: h.number,
+  groupTitleHeight: h.number,
+  groupSubtitleHeight: h.number,
+  verticalLine: h.number,
+  height: h.oneOfType([h.string, h.number]),
+  onExpandChange: h.func,
+  onItemAction: h.func,
+  onItemDoubleClick: h.func,
+  onItemContextMenu: h.func,
+  onGroupAction: h.func
+};
+de.displayName = "KendoClientOrgChart";
+const Ee = (s) => {
+  const { expanded: t, node: o, nodes: i } = s, e = l.useContext(Y), n = (r) => {
+    e.onExpandChange && e.onExpandChange.call(void 0, {
+      event: r,
+      expand: !t,
+      item: o,
+      items: i
+    });
+  };
+  return /* @__PURE__ */ l.createElement(
+    tt,
+    {
+      className: "k-orgchart-button",
+      icon: t ? "minus" : "plus",
+      tabIndex: -1,
+      svgIcon: t ? nt : it,
+      "aria-label": t ? "collapse" : "expand",
+      onClick: n
+    }
+  );
+}, pt = (s) => {
+  const { node: t, children: o, style: i, ...e } = s, [n, r] = l.useState(!1), a = l.useContext(Y), c = (f) => {
+    a.onKeyDown && a.onKeyDown.call(void 0, {
+      event: f,
+      item: t
+    });
+  }, m = (f) => {
+    a.onItemAction && a.onItemAction.call(void 0, {
+      event: f,
+      item: t
+    });
+  }, d = (f) => {
+    a.onItemContextMenu && a.onItemContextMenu.call(void 0, {
+      event: f,
+      item: t
+    });
+  }, g = (f) => {
+    a.onItemDoubleClick && a.onItemDoubleClick.call(void 0, {
+      event: f,
+      item: t
+    });
+  };
+  return /* @__PURE__ */ l.createElement(
+    Ze,
+    {
+      role: "treeitem",
+      className: _(
+        "k-orgchart-card",
+        { "k-focus": n }
+      ),
+      onClick: m,
+      onKeyDown: c,
+      onContextMenu: d,
+      onDoubleClick: g,
+      style: i,
+      "aria-selected": n,
+      "aria-keyshortcuts": "Enter",
+      onFocus: () => r(!0),
+      onBlur: () => r(!1),
+      ...e
+    },
+    o
+  );
+}, Ct = (s) => {
+  const { level: t, children: o } = s, i = l.useContext(Y), e = i.cardColors && i.cardColors[t] || "green";
+  return /* @__PURE__ */ l.createElement(Je, { className: "k-hstack", style: { borderTopColor: e } }, o);
+}, kt = "k-orgchart-node", xe = (s) => {
+  const t = {
+    avatarType: "image"
+  }, {
+    id: o,
+    title: i,
+    subtitle: e,
+    level: n,
+    childLineWidth: r,
+    cardWidth: a,
+    cardHeight: c,
+    verticalLine: m,
+    color: d,
+    line: g,
+    plus: f,
+    expanded: u,
+    node: k,
+    avatar: b,
+    avatarType: I,
+    itemRender: R,
+    ...S
+  } = { ...s, ...t }, E = R;
+  return /* @__PURE__ */ l.createElement(
+    "div",
+    {
+      ...S,
+      className: _(
+        s.className,
+        kt,
+        "k-vstack",
+        "k-align-items-center"
+      )
+    },
+    n !== 0 && /* @__PURE__ */ l.createElement(
+      "div",
+      {
+        className: "k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",
+        style: { height: m }
+      }
+    ),
+    /* @__PURE__ */ l.createElement(
+      pt,
+      {
+        node: k,
+        style: { width: a, height: c },
+        "aria-level": n + 1,
+        "aria-expanded": !!u,
+        "aria-owns": o
+      },
+      /* @__PURE__ */ l.createElement(Ct, { level: n }, E ? /* @__PURE__ */ l.createElement(
+        E,
+        {
+          item: k,
+          title: i,
+          subtitle: e,
+          level: n,
+          expanded: u,
+          color: d
+        }
+      ) : /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(Qe, { type: I, themeColor: "secondary" }, I === "image" ? /* @__PURE__ */ l.createElement(
+        "img",
+        {
+          src: b,
+          alt: "KendoReact Avatar Customer Image"
+        }
+      ) : b), /* @__PURE__ */ l.createElement("div", { className: "k-card-title-wrap k-vstack" }, /* @__PURE__ */ l.createElement(Ye, { className: "k-text-ellipsis" }, i), /* @__PURE__ */ l.createElement("span", { className: "k-spacer" }), /* @__PURE__ */ l.createElement(et, { className: "k-text-ellipsis" }, e)), /* @__PURE__ */ l.createElement("span", { className: "k-spacer" })))
+    ),
+    g && /* @__PURE__ */ l.createElement("div", { className: "k-orgchart-line k-orgchart-line-v" }),
+    f && /* @__PURE__ */ l.createElement(Ee, { expanded: u, node: k }),
+    f && !!r && /* @__PURE__ */ l.createElement(
+      "div",
+      {
+        className: "k-orgchart-line k-orgchart-line-h",
+        style: { width: r, marginTop: -15 }
+      }
+    )
+  );
+}, be = ({
+  dataByGroups: s,
+  data: t = [],
+  cardWidth: o,
+  childrenField: i,
+  idField: e,
+  expandField: n,
+  hasChildrenField: r,
+  groupField: a,
+  level: c = 1,
+  parentId: m = 0
+}) => {
+  t.forEach((d) => {
+    const g = d[i];
+    if (d[n] && g && g.length) {
+      const u = g.some((I) => I[i] && I[i].length || r && I[r]), k = u ? "horizontal" : "vertical", b = u ? null : o;
+      s.push({
+        ids: [d[e]],
+        items: g,
+        level: c,
+        parentId: m,
+        hasChildren: u,
+        orientation: k,
+        width: b
+      }), be({
+        dataByGroups: s,
+        data: d[i],
+        childrenField: i,
+        cardWidth: o,
+        idField: e,
+        expandField: n,
+        hasChildrenField: r,
+        groupField: a,
+        level: c + 1,
+        parentId: d[e]
+      });
+    }
+  });
+}, Et = (s, t) => {
+  const o = t || Ce, i = s.sort((e, n) => n.level - e.level);
+  i.forEach((e) => {
+    if (!e.width) {
+      const n = i.filter((m) => e.ids.includes(m.parentId)), r = n.length ? Math.max(...n.map((m) => m.width || 0)) : o, a = e.orientation === "horizontal" ? e.items.length : 1, c = r * a + T * (a - 1);
+      e.width = c;
+    }
+  });
+}, xt = (s, t, o) => {
+  const i = s.sort((e, n) => e.level - n.level);
+  i.forEach((e) => {
+    if (e.level === 0)
+      return;
+    const n = i.find((u) => u.ids.includes(e.parentId)), r = (n == null ? void 0 : n.items.findIndex((u) => e.ids.includes(u[o]))) || 0, a = (n == null ? void 0 : n.items) || [], c = n.width ? (n.width - (a.length - 1) * T) / a.length : 0;
+    if (!e.left) {
+      let u = (n == null ? void 0 : n.left) || 0;
+      a.forEach((k, b) => {
+        b < r && (u += c + T);
+      }), e.left = u;
+    }
+    const m = (n == null ? void 0 : n.width) || 0, d = (n == null ? void 0 : n.items.length) || 1, g = (m - (d - 1) * T) / d;
+    e.width = g;
+    const f = n == null ? void 0 : n.items.map((u) => {
+      const k = u[t] ? u[t].length : 0, b = i.find((R) => R.ids.includes(u[o])), I = (b == null ? void 0 : b.width) || 0;
+      return (b == null ? void 0 : b.orientation) === "vertical" || k === 0 || !u.expanded ? 0 : I - (I - (k - 1) * T) / k;
+    });
+    n && (n.childLineWidths = f);
+  });
+}, bt = (s, t, o) => {
+  const i = t || q, e = o || O;
+  s.forEach((n) => {
+    const r = n.level, a = (i + e) * r + O * (r ? r - 1 : 0) - (e - O) * (r ? 1 : 0);
+    n.top = a;
+  });
+}, It = (s, t, o) => {
+  const i = t || q, e = o || O;
+  return Math.max(...s.map((r) => {
+    const a = r.top || 0, c = r.items.length, m = r.orientation === "horizontal" ? i + e + e : c * (i + e);
+    return a + m;
+  }));
+}, Ie = (s) => {
+  const t = {
+    width: "100%",
+    data: [],
+    ariaLabel: "Org Chart",
+    idField: "id",
+    childrenField: "items",
+    avatarField: "avatar",
+    titleField: "title",
+    subtitleField: "subtitle",
+    expandField: "expanded"
+  }, {
+    id: o,
+    width: i,
+    data: e,
+    groupField: n,
+    cardWidth: r,
+    cardHeight: a,
+    verticalLine: c,
+    idField: m,
+    childrenField: d,
+    hasChildrenField: g,
+    expandField: f,
+    avatarField: u,
+    titleField: k,
+    subtitleField: b,
+    ariaLabel: I,
+    itemRender: R,
+    height: S
+  } = { ...t, ...s }, E = [{
+    items: e,
+    level: 0,
+    hasChildren: !0,
+    orientation: "horizontal",
+    ids: [0],
+    parentId: null,
+    width: null
+  }];
+  be({
+    dataByGroups: E,
+    data: e,
+    cardWidth: r,
+    expandField: f,
+    hasChildrenField: g,
+    childrenField: d,
+    idField: m,
+    groupField: n
+  }), Et(E, r), xt(E, d, m), bt(E, a, c);
+  const G = It(E, a, c);
+  return /* @__PURE__ */ l.createElement("div", { className: "k-orgchart-container", style: { width: i, height: S || G } }, E.map((y) => {
+    const x = y.level, B = y.items, D = x === 0 ? "center" : "around", $ = y.orientation;
+    return /* @__PURE__ */ l.createElement(
+      "div",
+      {
+        role: x === 0 ? "tree" : "group",
+        id: o + "-" + x + "-" + y.ids[0],
+        "aria-label": x === 0 ? I : void 0,
+        "aria-orientation": x === 0 ? $ : void 0,
+        key: y.ids[0] + "_" + x,
+        className: _(
+          "k-orgchart-group",
+          `k-orgchart-level-${x}`,
+          "k-pos-absolute",
+          {
+            [`k-${te.orientationMap[$]}`]: $,
+            [`k-justify-content-${D}`]: D
+          }
+        ),
+        style: {
+          width: y.width || "100%",
+          left: y.left,
+          top: y.top
+        }
+      },
+      B.length > 0 && /* @__PURE__ */ l.createElement(
+        "div",
+        {
+          role: "group",
+          style: { width: "100%" },
+          className: _(
+            "k-orgchart-node-container",
+            "k-justify-content-around",
+            {
+              [`k-${te.orientationMap[y.orientation]}`]: y.orientation
+            }
+          )
+        },
+        B.map((C, L) => {
+          const W = C[d] && C[d].length || g && C[g], z = W || y.orientation === "vertical" && L !== B.length - 1, V = y.orientation === "vertical" && L !== 0 ? 0 : c || O, U = y.childLineWidths ? Math.max(...y.childLineWidths) : void 0, X = C[f];
+          return /* @__PURE__ */ l.createElement(
+            xe,
+            {
+              id: o + "-" + (x + 1) + "-" + C[m],
+              style: { width: U },
+              itemRender: R,
+              cardHeight: a,
+              cardWidth: r,
+              verticalLine: V,
+              key: L,
+              level: x,
+              avatar: C[u],
+              title: C[k],
+              subtitle: C[b],
+              line: z,
+              expanded: X,
+              node: C,
+              childLineWidth: W && X && y.orientation === "horizontal" ? y.childLineWidths[L] : 0,
+              plus: W
+            },
+            C.text
+          );
+        })
+      )
+    );
+  }));
+};
+Ie.displayName = "KendoServerOrgChart";
+const yt = {
+  name: "@progress/kendo-react-orgchart",
+  productName: "KendoReact",
+  productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
+  publishDate: 1700573668,
+  version: "",
+  licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"
+}, Ft = (s) => {
+  const { nodes: t, children: o, style: i, ...e } = s, [n, r] = l.useState(!1), a = l.useContext(Y), c = l.useRef(null), m = (u) => {
+    a.onKeyDown && a.onKeyDown({
+      event: u,
+      items: t
+    });
+  }, d = (u) => {
+    a.onGroupAction && a.onGroupAction({
+      event: u,
+      items: t
+    });
+  }, g = (u) => {
+    r(!0), a.onGroupFocus && a.onGroupFocus({
+      event: u,
+      items: t,
+      containerRef: c
+    });
+  }, f = (u) => {
+    r(!1), a.onGroupBlur && a.onGroupBlur({
+      event: u,
+      items: t
+    });
+  };
+  return /* @__PURE__ */ l.createElement(
+    "div",
+    {
+      role: "treeitem",
+      "aria-selected": n,
+      ref: c,
+      className: _(
+        "k-orgchart-node-group-container",
+        "k-vstack",
+        { "k-focus": n }
+      ),
+      style: i,
+      onKeyDown: m,
+      onClick: d,
+      onFocus: g,
+      onBlur: f,
+      ...e
+    },
+    o
+  );
+}, wt = "k-orgchart-node-group", ge = "k-orgchart-node-group-title", fe = "k-orgchart-node-group-subtitle", Lt = (s) => {
+  const t = {
+    orientation: "horizontal"
+  }, {
+    id: o,
+    title: i,
+    subtitle: e,
+    line: n,
+    plus: r,
+    focus: a,
+    level: c,
+    verticalLine: m,
+    childLineWidth: d,
+    orientation: g,
+    expanded: f,
+    nodes: u,
+    groupTitleHeight: k,
+    groupSubtitleHeight: b,
+    groupTitleRender: I,
+    groupSubtitleRender: R,
+    ...S
+  } = { ...t, ...s }, E = I, G = R, y = { height: k || ne }, x = { height: b || ie };
+  return /* @__PURE__ */ l.createElement(
+    "div",
+    {
+      ...S,
+      className: _(
+        s.className,
+        wt,
+        "k-vstack",
+        "k-align-items-center"
+      )
+    },
+    c !== 0 && /* @__PURE__ */ l.createElement(
+      "div",
+      {
+        className: "k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",
+        style: { height: m }
+      }
+    ),
+    /* @__PURE__ */ l.createElement(
+      Ft,
+      {
+        nodes: u,
+        "aria-expanded": !!f,
+        "aria-keyshortcuts": "Enter",
+        "aria-level": c + 1,
+        "aria-owns": o
+      },
+      E ? /* @__PURE__ */ l.createElement(
+        E,
+        {
+          style: y,
+          className: ge,
+          title: i,
+          items: u,
+          level: c,
+          expanded: f
+        }
+      ) : /* @__PURE__ */ l.createElement("div", { className: ge, style: y }, i),
+      G ? /* @__PURE__ */ l.createElement(
+        G,
+        {
+          style: x,
+          className: fe,
+          subtitle: e,
+          items: u,
+          level: c,
+          expanded: f
+        }
+      ) : /* @__PURE__ */ l.createElement("div", { className: fe, style: x }, e),
+      /* @__PURE__ */ l.createElement(
+        "div",
+        {
+          role: "group",
+          style: { width: "100%" },
+          className: _(
+            "k-orgchart-node-container",
+            "k-justify-content-around",
+            {
+              [`k-${te.orientationMap[g] || g}`]: g
+            }
+          )
+        },
+        s.children
+      )
+    ),
+    n && /* @__PURE__ */ l.createElement("div", { className: "k-orgchart-line k-orgchart-line-v" }),
+    r && /* @__PURE__ */ l.createElement(Ee, { expanded: f, nodes: u }),
+    r && !!d && /* @__PURE__ */ l.createElement(
+      "div",
+      {
+        className: "k-orgchart-line k-orgchart-line-h",
+        style: { width: d, marginTop: -15 }
+      }
+    )
+  );
+}, ye = ({
+  dataByGroups: s,
+  data: t = [],
+  cardWidth: o,
+  childrenField: i,
+  idField: e,
+  expandField: n,
+  hasChildrenField: r,
+  groupField: a,
+  level: c = 1,
+  parentId: m = 0
+}) => {
+  t.forEach((d) => {
+    const g = d[i];
+    if (d[n] && g && g.length) {
+      const u = g.some((E) => E[i] && E[i].length || r && E[r]), k = u ? "horizontal" : "vertical", b = u ? null : o + 2 * T, I = s.find((E) => E.parentId === m), R = s.find((E) => E.ids.includes(m));
+      let S = !1;
+      if (I) {
+        const E = I.ids[0], G = R.items.find((x) => x[e] === E), y = R.items.find((x) => x[e] === d[e]);
+        S = G[a] === y[a];
+      }
+      I && S ? (I.ids.push(d[e]), I.items = I.items.concat(g)) : s.push({
+        ids: [d[e]],
+        items: g,
+        level: c,
+        parentId: m,
+        hasChildren: u,
+        orientation: k,
+        width: b
+      }), ye({
+        dataByGroups: s,
+        data: d[i],
+        childrenField: i,
+        cardWidth: o,
+        idField: e,
+        expandField: n,
+        hasChildrenField: r,
+        groupField: a,
+        level: c + 1,
+        parentId: d[e]
+      });
+    }
+  });
+}, Nt = (s, t) => {
+  const o = t || Ce, i = s.sort((e, n) => n.level - e.level);
+  i.forEach((e) => {
+    if (!e.width) {
+      const n = i.filter((r) => e.ids.includes(r.parentId));
+      if (n.length) {
+        const r = Math.max(...n.map((d) => d.width || 0)), a = Math.max(...n.map((d) => d.groupedItems.length || 0)), c = Math.max(...e.groupedItems.map((d) => {
+          const g = e.orientation === "horizontal" ? d.items.length : 1;
+          return g * (o + 2 * T) + T * (g - 1);
+        })), m = r * a + T * (a - 1);
+        e.width = Math.max(m, c);
+      } else {
+        const r = Math.max(...e.groupedItems.map((a) => {
+          const c = e.orientation === "horizontal" ? a.items.length : 1;
+          return c * (o + 2 * T) + T * (c - 1);
+        }));
+        e.width = r;
+      }
+    }
+  });
+}, Tt = (s, t) => {
+  const o = s.sort((i, e) => i.level - e.level);
+  o.forEach((i) => {
+    var g;
+    if (i.level === 0)
+      return;
+    const e = o.find((f) => f.ids.includes(i.parentId)), n = (e == null ? void 0 : e.groupedItems.findIndex((f) => f.items.some((u) => i.ids.includes(u[t])))) || 0, r = (e == null ? void 0 : e.groupedItems) || [], a = e.width ? (e.width - (r.length - 1) * T) / r.length : 0;
+    if (!i.left) {
+      let f = (e == null ? void 0 : e.left) || 0;
+      r.forEach((u, k) => {
+        k < n && (f += a + T);
+      }), i.left = f;
+    }
+    const c = (e == null ? void 0 : e.width) || 0, m = (e == null ? void 0 : e.groupedItems.length) || 1, d = (c - (m - 1) * T) / m;
+    if (i.width = d, e) {
+      const f = i.width - (i.width - (i.groupedItems.length - 1) * T) / i.groupedItems.length;
+      e.childLineWidths ? (g = e.childLineWidths) == null || g.push(f) : e.childLineWidths = [f];
+    }
+  });
+}, At = (s, t, o, i, e) => {
+  const n = t || q, r = e || O, a = o + i + ke;
+  s.forEach((c) => {
+    const m = c.level, d = (n + r + a) * m + O * (m ? m - 1 : 0) - (r - O) * (m ? 1 : 0);
+    c.top = d;
+  });
+}, Rt = (s, t, o, i, e) => {
+  const n = t || q, r = o || O, c = (i || ne) + (e || ie) + ke;
+  return Math.max(...s.map((d) => {
+    const g = d.top || 0, f = Math.max(...d.groupedItems.map((b) => b.items.length)), u = d.hasChildren ? O : 0, k = d.orientation === "horizontal" ? n + r + c + r + u : f * (n + r) + c + r;
+    return g + k;
+  }));
+}, Fe = (s) => {
+  const t = {
+    width: "100%",
+    data: [],
+    ariaLabel: "Org Chart",
+    idField: "id",
+    childrenField: "items",
+    avatarField: "avatar",
+    titleField: "title",
+    subtitleField: "subtitle",
+    expandField: "expanded",
+    orientation: "horizontal"
+  }, {
+    id: o,
+    width: i,
+    data: e,
+    groupField: n,
+    cardWidth: r,
+    cardHeight: a,
+    groupTitleHeight: c,
+    groupSubtitleHeight: m,
+    verticalLine: d,
+    idField: g,
+    childrenField: f,
+    expandField: u,
+    hasChildrenField: k,
+    avatarField: b,
+    titleField: I,
+    subtitleField: R,
+    cardsColors: S,
+    ariaLabel: E,
+    itemRender: G,
+    groupTitleRender: y,
+    groupSubtitleRender: x,
+    height: B
+  } = { ...t, ...s }, D = [{
+    items: e,
+    level: 0,
+    hasChildren: !0,
+    orientation: "horizontal",
+    ids: [0],
+    parentId: null,
+    width: null
+  }];
+  ye({
+    dataByGroups: D,
+    data: e,
+    cardWidth: r,
+    expandField: u,
+    hasChildrenField: k,
+    childrenField: f,
+    idField: g,
+    groupField: n
+  }), D.map((C) => {
+    C.groupedItems = ot(C.items, [{ field: n }]);
+  }), Nt(D, r), Tt(D, g), At(
+    D,
+    a || q,
+    c || ne,
+    m || ie,
+    d
+  );
+  const $ = Rt(
+    D,
+    a || q,
+    c || ne,
+    m || ie
+  );
+  return /* @__PURE__ */ React.createElement("div", { className: "k-orgchart-container", style: { width: i, height: B || $ } }, D.map((C) => {
+    const L = C.level, W = C.groupedItems.map((A) => {
+      const ee = A.items.some((j) => j[u]);
+      return {
+        ...A,
+        expanded: ee
+      };
+    }), z = W.filter((A) => A.expanded), V = L === 0 ? "center" : "around", U = "horizontal", X = S && S[L] || "green";
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        role: L === 0 ? "tree" : "group",
+        id: o + "-" + L + "-" + C.ids[0],
+        "aria-label": L === 0 ? E : void 0,
+        "aria-orientation": L === 0 ? U : void 0,
+        key: C.ids[0] + "_" + L,
+        className: _(
+          "k-orgchart-group",
+          `k-orgchart-level-${L}`,
+          "k-pos-absolute",
+          {
+            [`k-${te.orientationMap[U]}`]: U,
+            [`k-justify-content-${V}`]: V,
+            "k-orgchart-group-h": s.groupField
+          }
+        ),
+        style: {
+          width: C.width || "100%",
+          left: C.left,
+          top: C.top
+        }
+      },
+      e.length > 0 && W.map((A, ee) => {
+        const j = A.items.some((w) => w[f] && w[f].length || k && w[k]), oe = C.width ? (C.width - (W.length - 1) * T) / W.length : void 0, Z = z.findIndex((w) => w === A);
+        return /* @__PURE__ */ React.createElement(
+          Lt,
+          {
+            id: o + "-" + (L + 1) + "-" + A.items[0][g],
+            style: { width: oe },
+            groupTitleHeight: c,
+            groupSubtitleHeight: m,
+            groupTitleRender: y,
+            groupSubtitleRender: x,
+            key: ee,
+            level: L,
+            verticalLine: d || O,
+            title: A.items[0][n || I],
+            subtitle: n,
+            orientation: C.orientation,
+            childLineWidth: j && A.expanded && C.orientation === "horizontal" ? C.childLineWidths[Z] : 0,
+            line: j,
+            nodes: A.items,
+            expanded: A.expanded,
+            plus: j
+          },
+          A.items.map((w, se) => /* @__PURE__ */ React.createElement(
+            xe,
+            {
+              cardHeight: a,
+              cardWidth: r,
+              itemRender: G,
+              color: X,
+              key: se,
+              level: L,
+              avatar: w[b],
+              title: w[I],
+              subtitle: w[R],
+              verticalLine: 0,
+              line: !1,
+              node: w,
+              childLineWidth: 0,
+              plus: !1
+            },
+            w.text
+          ))
+        );
+      })
+    );
+  }));
+};
+Fe.displayName = "KendoServerGroupedOrgChart";
+const we = (s) => {
+  const t = {
+    tabIndex: 0,
+    navigatable: !0,
+    expandField: "expanded",
+    ariaLabel: "Org Chart",
+    idField: "id",
+    childrenField: "items",
+    avatarField: "avatar",
+    titleField: "title",
+    subtitleField: "subtitle",
+    ...s
+  }, {
+    cardsColors: o,
+    onExpandChange: i,
+    onKeyDown: e,
+    onItemAction: n,
+    onGroupAction: r,
+    onGroupBlur: a,
+    onGroupFocus: c,
+    id: m,
+    ...d
+  } = t, g = l.useRef(je());
+  return qe(yt), /* @__PURE__ */ l.createElement(de, { ...t }, s.groupField ? /* @__PURE__ */ l.createElement(
+    Fe,
+    {
+      id: m || g.current,
+      ...d
+    },
+    s.children
+  ) : /* @__PURE__ */ l.createElement(
+    Ie,
+    {
+      id: m || g.current,
+      ...d
+    },
+    s.children
+  ));
+};
+we.propTypes = {
+  className: h.string,
+  style: h.object,
+  id: h.string,
+  ariaLabel: h.string,
+  idField: h.string,
+  childrenField: h.string,
+  expandField: h.string,
+  titleField: h.string,
+  hasChildrenField: h.string,
+  subtitleField: h.string,
+  avatarField: h.string,
+  cardsColors: h.array,
+  data: h.array,
+  groupField: h.string,
+  cardHeight: h.number,
+  cardWidth: h.number,
+  groupTitleHeight: h.number,
+  groupSubtitleHeight: h.number,
+  verticalLine: h.number,
+  height: h.oneOfType([h.string, h.number]),
+  onExpandChange: h.func,
+  onItemAction: h.func,
+  onGroupAction: h.func
+};
+we.displayName = "KendoOrgChart";
+function Mt(s, t) {
+  if (!s || !s.length)
+    return [];
+  let o = s;
+  const i = t.cloneField || "cloned", e = t.expandField || ut, n = t.selectField || gt, r = t.checkField || pe, a = t.childrenField || mt;
+  return o = ae(o, e, t.expand, i, a), o = ae(o, n, t.select, i, a), o = ae(o, r, t.check, i, a), St(o, a, t.check), o;
+}
+function ae(s, t, o, i, e) {
+  if (o) {
+    const { ids: n, field: r } = Le(o, t), a = !ce(o) && o.idField ? Ve(n, o.idField, s, e) : n;
+    return Ht(s, a, r, i, e);
+  } else
+    return s;
+}
+function Le(s, t) {
+  let o, i;
+  return ce(s) ? (o = s, i = t) : (o = s.ids || [], i = s.operationField || t), { ids: o, field: i };
+}
+function Ht(s, t, o, i, e) {
+  let n = s;
+  return t.forEach((r) => {
+    n = Xe(n, r, (a) => Ne(o, a), i, e);
+  }), n;
+}
+function Ne(s, t) {
+  const o = (s || "").split(".");
+  let i = t;
+  for (let e = 0; e < o.length; e++) {
+    const n = o[e];
+    if (e === o.length - 1)
+      i[n] = !0;
+    else if (i[n] !== void 0)
+      i[n] = { ...i[n] }, i = i[n];
+    else
+      return;
+  }
+}
+function St(s, t, o) {
+  if (o && !ce(o) && o.applyCheckIndeterminate) {
+    const { field: i } = Le(o, pe), e = o.checkIndeterminateField || ft;
+    for (let n = 0; n < s.length; n++) {
+      const r = s[n], a = r[t];
+      a && le(
+        a,
+        ve(i, r) ? [] : [r],
+        t,
+        i,
+        e
+      );
+    }
+  }
+}
+function le(s, t, o, i, e) {
+  let n = !1;
+  for (let r = 0; r < s.length; r++) {
+    const a = s[r];
+    if (ve(i, a)) {
+      if (!n)
+        for (let c = 0; c < t.length; c++)
+          Ne(e, t[c]);
+      n = !0, a[o] && le(a[o], [], o, i, e);
+    } else
+      a[o] && le(
+        a[o],
+        n ? [a] : t.concat([a]),
+        o,
+        i,
+        e
+      );
+  }
+}
+export {
+  we as OrgChart,
+  Ie as ServerOrgChart,
+  Lt as ServerOrgChartGroup,
+  xe as ServerOrgChartNode,
+  Mt as processOrgChartItems
+};