@reportportal/ui-kit 0.0.1-alpha.174 → 0.0.1-alpha.175

package/dist/common/hooks/useTreeSortable.d.ts

@@ -1,3 +1,3 @@
 import { UseTreeSortableOptions, UseTreeSortableReturn } from '../types';
 
-export declare const useTreeSortable: ({ id, index, parentId, type, isDisabled, acceptDrop, canDropOn, onDrop, hideDefaultPreview, }: UseTreeSortableOptions) => UseTreeSortableReturn;
+export declare const useTreeSortable: ({ id, index, parentId, type, isDisabled, acceptDrop, isLast, canDropOn, onDrop, hideDefaultPreview, }: UseTreeSortableOptions) => UseTreeSortableReturn;

package/dist/common/hooks.js

@@ -1,5 +1,5 @@
 import { u as E } from "../useOnClickOutside-8f7d68a1.js";
-import { u as A, a as R } from "../useTreeSortable-70a9c8f5.js";
+import { u as A, a as R } from "../useTreeSortable-694cfbbc.js";
 import { useCallback as D } from "react";
 import { i as x } from "../isEmpty-ccacb5ff.js";
 import { u as W } from "../useWindowResize-a7e1ac92.js";

package/dist/common/types/sortableTypes.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, Ref } from 'react';
+import { ReactNode, Ref, CSSProperties } from 'react';
 import { XYCoord, ConnectDragSource, ConnectDropTarget, ConnectDragPreview } from 'react-dnd';
 
 export interface SortableItemData {
@@ -101,6 +101,7 @@ export interface UseTreeSortableOptions {
     type?: string;
     isDisabled?: boolean;
     acceptDrop?: boolean;
+    isLast?: boolean;
     canDropOn?: (draggedItem: TreeDragItem, targetId: string | number) => boolean;
     onDrop?: TreeDropHandler;
     hideDefaultPreview?: boolean;
@@ -126,8 +127,8 @@ export interface TreeSortableItemProps {
     acceptDrop?: boolean;
     isLast?: boolean;
     canDropOn?: (draggedItem: TreeDragItem, targetId: string | number) => boolean;
-    depth?: number;
     className?: string;
+    style?: CSSProperties;
     draggingClassName?: string;
     dropBeforeClassName?: string;
     dropInsideClassName?: string;

package/dist/components/sortable/treeSortableItem/treeSortableItem.d.ts

@@ -1,3 +1,3 @@
 import { TreeSortableItemProps } from '../../../common/types';
 
-export declare const TreeSortableItem: ({ id, index, parentId, type, isDisabled, acceptDrop, isLast, canDropOn, className, draggingClassName, dropBeforeClassName, dropInsideClassName, dropAfterClassName, onDrop, hideDefaultPreview, children, }: TreeSortableItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TreeSortableItem: ({ id, index, parentId, type, isDisabled, acceptDrop, isLast, canDropOn, className, style, draggingClassName, dropBeforeClassName, dropInsideClassName, dropAfterClassName, onDrop, hideDefaultPreview, children, }: TreeSortableItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -75,7 +75,7 @@ import "./useWindowResize-a7e1ac92.js";
 import "@floating-ui/react";
 import "./floatingUi-41f8c7b5.js";
 import "es-toolkit";
-import "./useTreeSortable-70a9c8f5.js";
+import "./useTreeSortable-694cfbbc.js";
 import "./common.js";
 import "react-resizable";
 export {

package/dist/segmentedControl.js

@@ -1,42 +1,42 @@
-import { jsx as u, jsxs as m } from "react/jsx-runtime";
-import { useState as o, useEffect as f } from "react";
-import { c as v } from "./bind-06a7ff84.js";
-const N = "_button_188ud_28", w = "_disabled_188ud_53", x = "_active_188ud_53", h = "_icon_188ud_77", j = {
-  "segmented-control": "_segmented-control_188ud_16",
-  "full-width": "_full-width_188ud_23",
-  button: N,
-  disabled: w,
-  active: x,
-  icon: h
-}, c = v.bind(j), g = ({
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
+import { useState as o, useEffect as v } from "react";
+import { c as z } from "./bind-06a7ff84.js";
+const f = "_button_8evzz_29", N = "_disabled_8evzz_50", w = "_active_8evzz_50", x = "_icon_8evzz_74", h = {
+  "segmented-control": "_segmented-control_8evzz_16",
+  "full-width": "_full-width_8evzz_24",
+  button: f,
+  disabled: N,
+  active: w,
+  icon: x
+}, c = z.bind(h), S = ({
   options: s,
   onChange: l,
-  className: r,
-  fullWidth: n = !1,
-  ariaLabel: i
+  className: n,
+  fullWidth: i = !1,
+  ariaLabel: _
 }) => {
-  const [d, t] = o(s);
-  f(() => {
-    t(s);
+  const [t, d] = o(s);
+  v(() => {
+    d(s);
   }, [s]);
-  const _ = (e) => {
+  const b = (e) => {
     if (!e.disabled && !e.selected) {
-      const b = d.map((a) => ({
+      const m = t.map((a) => ({
         ...a,
         selected: a.value === e.value
       }));
-      t(b), l == null || l(e.value);
+      d(m), l == null || l(e.value);
     }
   };
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ r(
     "div",
     {
-      className: c("segmented-control", r, {
-        "full-width": n
+      className: c("segmented-control", n, {
+        "full-width": i
       }),
       role: "group",
-      "aria-label": i,
-      children: d.map((e) => /* @__PURE__ */ m(
+      "aria-label": _,
+      children: t.map((e) => /* @__PURE__ */ u(
         "button",
         {
           type: "button",
@@ -44,11 +44,11 @@ const N = "_button_188ud_28", w = "_disabled_188ud_53", x = "_active_188ud_53",
             active: e.selected,
             disabled: e.disabled
           }),
-          onClick: () => _(e),
+          onClick: () => b(e),
           disabled: e.disabled,
           "aria-pressed": e.selected,
           children: [
-            e.icon && /* @__PURE__ */ u("span", { className: c("icon"), children: e.icon }),
+            e.icon && /* @__PURE__ */ r("span", { className: c("icon"), children: e.icon }),
             e.label
           ]
         },
@@ -58,5 +58,5 @@ const N = "_button_188ud_28", w = "_disabled_188ud_53", x = "_active_188ud_53",
   );
 };
 export {
-  g as SegmentedControl
+  S as SegmentedControl
 };

package/dist/sortable.js

@@ -1,184 +1,184 @@
-import { jsx as u, jsxs as q } from "react/jsx-runtime";
-import { c as N } from "./bind-06a7ff84.js";
+import { jsx as v, jsxs as q } from "react/jsx-runtime";
+import { c as z } from "./bind-06a7ff84.js";
 import { isFunction as j } from "es-toolkit";
-import { useCallback as A, createContext as M, useContext as ee, useState as H, useRef as J } from "react";
-import { u as te, D as F, g as re, a as oe } from "./useTreeSortable-70a9c8f5.js";
-import { useDragLayer as se } from "react-dnd";
+import { useCallback as A, createContext as ee, useContext as te, useState as H, useRef as J } from "react";
+import { u as re, D as F, g as oe, a as se } from "./useTreeSortable-694cfbbc.js";
+import { useDragLayer as ie } from "react-dnd";
 import "react-dnd-html5-backend";
-import { DROP_DETECTION_MODE as X, DROP_POSITIONS as Y, DROP_ACTIONS as _, TREE_DROP_POSITIONS as S } from "./common.js";
+import { DROP_DETECTION_MODE as X, DROP_POSITIONS as Y, DROP_ACTIONS as m, TREE_DROP_POSITIONS as h } from "./common.js";
 import { createPortal as K } from "react-dom";
-import { u as ie } from "./useOnClickOutside-8f7d68a1.js";
-const ne = {
+import { u as ne } from "./useOnClickOutside-8f7d68a1.js";
+const ae = {
   "sortable-item": "_sortable-item_b58jz_16",
   "sortable-item--drop-target-top": "_sortable-item--drop-target-top_b58jz_22",
   "sortable-item--drop-target-bottom": "_sortable-item--drop-target-bottom_b58jz_35",
   "sortable-item--hover-mode": "_sortable-item--hover-mode_b58jz_48",
   "drag-handle": "_drag-handle_b58jz_65",
   "drag-handle--disabled": "_drag-handle--disabled_b58jz_72"
-}, ae = N.bind(ne), le = ({
+}, le = z.bind(ae), pe = ({
   id: n,
-  index: f,
-  type: v = F,
-  isDisabled: E = !1,
+  index: b,
+  type: E = F,
+  isDisabled: O = !1,
   className: o,
   draggingClassName: a,
-  dropTargetClassName: p,
+  dropTargetClassName: l,
   onDrop: e,
-  hideDefaultPreview: c = !1,
+  hideDefaultPreview: d = !1,
   dropDetectionMode: s = X.INDEX_BASED,
-  isLast: t = !1,
+  isLast: r = !1,
   children: i
 }) => {
-  const { isDragging: l, dropPosition: d, dragRef: R, dropRef: g, previewRef: r } = te({
+  const { isDragging: p, dropPosition: _, dragRef: T, dropRef: y, previewRef: P } = re({
     id: n,
-    index: f,
-    type: v,
-    isDisabled: E,
+    index: b,
+    type: E,
+    isDisabled: O,
     onDrop: e,
-    hideDefaultPreview: c,
+    hideDefaultPreview: d,
     dropDetectionMode: s,
-    isLast: t
-  }), O = j(i), P = s === X.HOVER, T = ae("sortable-item", o, {
-    "sortable-item--dragging": l,
-    "sortable-item--hover-mode": P,
-    "sortable-item--drop-target-top": d === Y.TOP,
-    "sortable-item--drop-target-bottom": d === Y.BOTTOM,
-    [a || ""]: l && a,
-    [p || ""]: d && p
+    isLast: r
+  }), t = j(i), g = s === X.HOVER, I = le("sortable-item", o, {
+    "sortable-item--dragging": p,
+    "sortable-item--hover-mode": g,
+    "sortable-item--drop-target-top": _ === Y.TOP,
+    "sortable-item--drop-target-bottom": _ === Y.BOTTOM,
+    [a || ""]: p && a,
+    [l || ""]: _ && l
   });
-  return /* @__PURE__ */ u("div", { ref: (b) => {
-    g(b), c || r(b), O || R(b);
-  }, className: T, children: O ? i({
-    isDragging: l,
-    isOver: d !== null,
-    dragRef: R
+  return /* @__PURE__ */ v("div", { ref: (c) => {
+    y(c), d || P(c), t || T(c);
+  }, className: I, children: t ? i({
+    isDragging: p,
+    isOver: _ !== null,
+    dragRef: T
   }) : i });
 }, Re = ({
   items: n,
-  type: f = F,
-  isDisabled: v = !1,
-  className: E,
+  type: b = F,
+  isDisabled: E = !1,
+  className: O,
   itemClassName: o,
   onReorder: a,
-  renderItem: p,
-  keyExtractor: e = (c) => c.id
+  renderItem: l,
+  keyExtractor: e = (d) => d.id
 }) => {
-  const c = A(
-    (s, t) => {
-      const i = [...n], [l] = i.splice(s, 1);
-      i.splice(t, 0, l), a(i);
+  const d = A(
+    (s, r) => {
+      const i = [...n], [p] = i.splice(s, 1);
+      i.splice(r, 0, p), a(i);
     },
     [n, a]
   );
-  return /* @__PURE__ */ u("div", { className: E, children: n.map((s, t) => /* @__PURE__ */ u(
-    le,
+  return /* @__PURE__ */ v("div", { className: O, children: n.map((s, r) => /* @__PURE__ */ v(
+    pe,
     {
       id: e(s),
-      index: t,
-      type: f,
-      isDisabled: v,
+      index: r,
+      type: b,
+      isDisabled: E,
       className: o,
-      onDrop: c,
-      isLast: t === n.length - 1,
-      children: ({ dragRef: i, isDragging: l }) => p(s, t, i, l)
+      onDrop: d,
+      isLast: r === n.length - 1,
+      children: ({ dragRef: i, isDragging: p }) => l(s, r, i, p)
     },
     e(s)
   )) });
-}, pe = {
+}, de = {
   "drag-layer": "_drag-layer_1izcx_1",
   "drag-preview": "_drag-preview_1izcx_11"
-}, G = N.bind(pe), he = ({
+}, G = z.bind(de), he = ({
   type: n,
-  renderPreview: f,
-  className: v,
-  previewClassName: E,
+  renderPreview: b,
+  className: E,
+  previewClassName: O,
   portalTarget: o = document.body
 }) => {
-  const { itemType: a, isDragging: p, item: e, clientOffset: c } = se(
-    (t) => ({
-      item: t.getItem(),
-      itemType: t.getItemType(),
-      clientOffset: t.getClientOffset(),
-      isDragging: t.isDragging()
+  const { itemType: a, isDragging: l, item: e, clientOffset: d } = ie(
+    (r) => ({
+      item: r.getItem(),
+      itemType: r.getItemType(),
+      clientOffset: r.getClientOffset(),
+      isDragging: r.isDragging()
     })
   );
-  if (!p || a !== n || !e || !o)
+  if (!l || a !== n || !e || !o)
     return null;
-  const s = /* @__PURE__ */ u("div", { className: G("drag-layer", v), children: /* @__PURE__ */ u("div", { className: G("drag-preview", E), style: re(c), children: f(e) }) });
+  const s = /* @__PURE__ */ v("div", { className: G("drag-layer", E), children: /* @__PURE__ */ v("div", { className: G("drag-preview", O), style: oe(d), children: b(e) }) });
   return K(s, o);
-}, Q = M(null), ce = () => ee(Q), de = {
+}, Q = ee(null), ce = () => te(Q), me = {
   "drop-confirmation-popover": "_drop-confirmation-popover_obz3t_16",
   "drop-confirmation-popover--before": "_drop-confirmation-popover--before_obz3t_31",
   "drop-confirmation-popover--after": "_drop-confirmation-popover--after_obz3t_35",
   "drop-confirmation-popover__button": "_drop-confirmation-popover__button_obz3t_59",
   "drop-confirmation-popover__divider": "_drop-confirmation-popover__divider_obz3t_75"
-}, C = N.bind(de), me = {
-  [_.MOVE]: "Move",
-  [_.DUPLICATE]: "Duplicate",
-  [_.CANCEL]: "Cancel"
+}, C = z.bind(me), be = {
+  [m.MOVE]: "Move",
+  [m.DUPLICATE]: "Duplicate",
+  [m.CANCEL]: "Cancel"
 }, Se = ({
   children: n,
-  showDropConfirmation: f = !1,
-  confirmationLabels: v,
-  portalTarget: E,
+  showDropConfirmation: b = !1,
+  confirmationLabels: E,
+  portalTarget: O,
   onMove: o,
   onDuplicate: a,
-  onCancel: p
+  onCancel: l
 }) => {
-  const [e, c] = H(null), [s, t] = H(
+  const [e, d] = H(null), [s, r] = H(
     null
-  ), i = J(null), l = { ...me, ...v }, d = A(() => {
-    c(null), t(null);
-  }, []), R = A(
-    (P, T, m, b) => {
-      if (!f) {
-        o == null || o(P, T, m);
+  ), i = J(null), p = { ...be, ...E }, _ = A(() => {
+    d(null), r(null);
+  }, []), T = A(
+    (g, I, u, c) => {
+      if (!b) {
+        o == null || o(g, I, u);
         return;
       }
-      const I = b.getBoundingClientRect(), z = I.left + I.width / 2;
-      let h;
-      m === "before" ? h = I.top : m === "after" ? h = I.top + I.height : h = I.top, t({
-        top: h,
-        left: z
-      }), c({ draggedItem: P, targetId: T, position: m });
+      const f = c.getBoundingClientRect(), N = f.left + f.width / 2;
+      let R;
+      u === "before" ? R = f.top : u === "after" ? R = f.top + f.height : R = f.top, r({
+        top: R,
+        left: N
+      }), d({ draggedItem: g, targetId: I, position: u });
     },
-    [f, o]
-  ), g = A(
-    (P) => {
+    [b, o]
+  ), y = A(
+    (g) => {
       if (!e) {
-        d();
+        _();
         return;
       }
-      const { draggedItem: T, targetId: m, position: b } = e;
-      switch (P) {
-        case _.MOVE:
-          o == null || o(T, m, b);
+      const { draggedItem: I, targetId: u, position: c } = e;
+      switch (g) {
+        case m.MOVE:
+          o == null || o(I, u, c);
           break;
-        case _.DUPLICATE:
-          a == null || a(T, m, b);
+        case m.DUPLICATE:
+          a == null || a(I, u, c);
           break;
-        case _.CANCEL:
-          p == null || p();
+        case m.CANCEL:
+          l == null || l();
           break;
       }
-      d();
+      _();
     },
-    [e, o, a, p, d]
+    [e, o, a, l, _]
   );
-  ie(
+  ne(
     i,
-    e && f ? () => g(_.CANCEL) : void 0
+    e && b ? () => y(m.CANCEL) : void 0
   );
-  const r = {
-    showDropConfirmation: f,
+  const P = {
+    showDropConfirmation: b,
     pendingDraggedItemId: (e == null ? void 0 : e.draggedItem.id) ?? null,
     pendingTargetId: (e == null ? void 0 : e.targetId) ?? null,
     pendingDropPosition: (e == null ? void 0 : e.position) ?? null,
-    requestDrop: R
-  }, O = E ?? (typeof document < "u" ? document.body : null);
-  return /* @__PURE__ */ q(Q.Provider, { value: r, children: [
+    requestDrop: T
+  }, t = O ?? (typeof document < "u" ? document.body : null);
+  return /* @__PURE__ */ q(Q.Provider, { value: P, children: [
     n,
-    e && s && O && K(
+    e && s && t && K(
       /* @__PURE__ */ q(
         "div",
         {
@@ -192,111 +192,114 @@ const ne = {
             left: s.left
           },
           children: [
-            /* @__PURE__ */ u(
+            /* @__PURE__ */ v(
               "button",
               {
                 type: "button",
                 className: C("drop-confirmation-popover__button"),
-                onClick: () => g(_.MOVE),
-                children: l[_.MOVE]
+                onClick: () => y(m.MOVE),
+                children: p[m.MOVE]
               }
             ),
-            /* @__PURE__ */ u(
+            /* @__PURE__ */ v(
               "button",
               {
                 type: "button",
                 className: C("drop-confirmation-popover__button"),
-                onClick: () => g(_.DUPLICATE),
-                children: l[_.DUPLICATE]
+                onClick: () => y(m.DUPLICATE),
+                children: p[m.DUPLICATE]
               }
             ),
-            /* @__PURE__ */ u("div", { className: C("drop-confirmation-popover__divider") }),
-            /* @__PURE__ */ u(
+            /* @__PURE__ */ v("div", { className: C("drop-confirmation-popover__divider") }),
+            /* @__PURE__ */ v(
               "button",
               {
                 type: "button",
                 className: C("drop-confirmation-popover__button"),
-                onClick: () => g(_.CANCEL),
-                children: l[_.CANCEL]
+                onClick: () => y(m.CANCEL),
+                children: p[m.CANCEL]
               }
             )
           ]
         }
       ),
-      O
+      t
     )
   ] });
-}, be = {
-  "tree-sortable-item": "_tree-sortable-item_c3l7m_16",
-  "tree-sortable-item--dragging": "_tree-sortable-item--dragging_c3l7m_20",
-  "tree-sortable-item--pending": "_tree-sortable-item--pending_c3l7m_23",
-  "tree-sortable-item--drop-before": "_tree-sortable-item--drop-before_c3l7m_29",
-  "tree-sortable-item--drop-after": "_tree-sortable-item--drop-after_c3l7m_39",
-  "tree-sortable-item--drop-inside": "_tree-sortable-item--drop-inside_c3l7m_49"
-}, _e = N.bind(be), ye = ({
+}, _e = {
+  "tree-sortable-item": "_tree-sortable-item_13y35_16",
+  "tree-sortable-item--dragging": "_tree-sortable-item--dragging_13y35_20",
+  "tree-sortable-item--pending": "_tree-sortable-item--pending_13y35_23",
+  "tree-sortable-item--drop-before": "_tree-sortable-item--drop-before_13y35_29",
+  "tree-sortable-item--drop-after": "_tree-sortable-item--drop-after_13y35_40",
+  "tree-sortable-item--drop-inside": "_tree-sortable-item--drop-inside_13y35_51"
+}, fe = z.bind(_e), Ce = ({
   id: n,
-  index: f,
-  parentId: v,
-  type: E = F,
+  index: b,
+  parentId: E,
+  type: O = F,
   isDisabled: o = !1,
   acceptDrop: a = !0,
-  isLast: p = !1,
+  isLast: l = !1,
   canDropOn: e,
-  className: c,
-  draggingClassName: s,
-  dropBeforeClassName: t,
-  dropInsideClassName: i,
-  dropAfterClassName: l,
-  onDrop: d,
-  hideDefaultPreview: R = !1,
-  children: g
+  className: d,
+  style: s,
+  draggingClassName: r,
+  dropBeforeClassName: i,
+  dropInsideClassName: p,
+  dropAfterClassName: _,
+  onDrop: T,
+  hideDefaultPreview: y = !1,
+  children: P
 }) => {
-  const r = ce(), O = J(null), P = A(
+  const t = ce(), g = J(null), I = A(
     (D, $, x) => {
-      r != null && r.showDropConfirmation && O.current ? r.requestDrop(D, $, x, O.current) : d == null || d(D, $, x);
+      t != null && t.showDropConfirmation && g.current ? t.requestDrop(D, $, x, g.current) : T == null || T(D, $, x);
     },
-    [r, d]
-  ), { isDragging: T, isOver: m, dropPosition: b, dragRef: I, dropRef: z, previewRef: h } = oe({
+    [t, T]
+  ), { isDragging: u, isOver: c, dropPosition: f, dragRef: N, dropRef: R, previewRef: W } = se({
     id: n,
-    index: f,
-    parentId: v,
-    type: E,
+    index: b,
+    parentId: E,
+    type: O,
     isDisabled: o,
     acceptDrop: a,
+    isLast: l,
     canDropOn: e,
-    onDrop: P,
-    hideDefaultPreview: R
-  }), k = (r == null ? void 0 : r.pendingDraggedItemId) === n, w = T || k, y = (r == null ? void 0 : r.pendingTargetId) === n, L = r == null ? void 0 : r.pendingDropPosition, B = m && b === S.BEFORE || y && L === S.BEFORE, U = m && b === S.INSIDE || y && L === S.INSIDE, V = p && (m && b === S.AFTER || y && L === S.AFTER), W = j(g) ? g({
+    onDrop: I,
+    hideDefaultPreview: y
+  }), k = (t == null ? void 0 : t.pendingDraggedItemId) === n, w = u || k, S = (t == null ? void 0 : t.pendingTargetId) === n, L = t == null ? void 0 : t.pendingDropPosition, B = c && f === h.BEFORE || S && L === h.BEFORE, U = c && f === h.INSIDE || S && L === h.INSIDE, V = l && (c && f === h.AFTER || S && L === h.AFTER), Z = j(P) ? P({
     isDragging: w,
-    isOver: m || y,
-    dropPosition: y ? L ?? null : b,
-    dragRef: I
-  }) : g, Z = _e("tree-sortable-item", c, {
+    isOver: c || S,
+    dropPosition: S ? L ?? null : f,
+    dragRef: N
+  }) : P, M = fe("tree-sortable-item", d, {
     "tree-sortable-item--dragging": w,
     "tree-sortable-item--pending": k,
     "tree-sortable-item--drop-before": B,
     "tree-sortable-item--drop-inside": U,
     "tree-sortable-item--drop-after": V,
-    [s || ""]: w && s,
-    [t || ""]: B && t,
-    [i || ""]: U && i,
-    [l || ""]: V && l
+    [r || ""]: w && r,
+    [i || ""]: B && i,
+    [p || ""]: U && p,
+    [_ || ""]: V && _
   });
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ v(
     "div",
     {
       ref: (D) => {
-        O.current = D, z(D), j(g) || (I(D), h(D));
+        g.current = D, R(D), j(P) || (N(D), W(D));
       },
-      className: Z,
-      children: W
+      className: M,
+      style: s,
+      children: Z
     }
   );
 };
 export {
   he as DragLayer,
-  le as SortableItem,
+  pe as SortableItem,
   Re as SortableList,
   Se as TreeSortableContainer,
-  ye as TreeSortableItem
+  Ce as TreeSortableItem
 };