@box/tree 0.45.0 → 0.45.2

package/dist/esm/lib/components/content-node/content-node.js

@@ -1,135 +1,160 @@
-import { LoadingIndicator as k } from "@box/blueprint-web";
-import s from "clsx";
-import { useRef as x, useMemo as A } from "react";
-import { useIntl as M } from "react-intl";
-import { CONTENT_NODE as S, CONTENT_NODE_LOADING as G } from "../../constants.js";
+import { LoadingIndicator as G } from "@box/blueprint-web";
+import d from "clsx";
+import { useRef as m, useMemo as P } from "react";
+import { useIntl as q } from "react-intl";
+import { CONTENT_NODE as B, CONTENT_NODE_LOADING as F } from "../../constants.js";
 import { s as e } from "../../../../chunks/nodes.module.js";
-import P from "./messages.js";
-import { jsxs as a, jsx as n } from "react/jsx-runtime";
-import { useIntersectionObserver as q } from "../../hooks/useIntersectionObserver.js";
-import { Expander as B } from "../expander/expander.js";
-import { NodeItemIcon as F } from "../node-icon/node-item-icon.js";
-import { NodeAvatar as H } from "../node-icon/node-avatar.js";
-import { TruncatedTooltipText as J } from "../truncated-tooltip-text/truncated-tooltip-text.js";
-import '../../../../styles/content-node.css';const K = "_loader_1xxrm_1", Q = "_content_1xxrm_9", U = "_title_1xxrm_15", V = "_subtitle_1xxrm_67", W = "_tooltip_1xxrm_83", l = {
-  loader: K,
-  content: Q,
+import H from "./messages.js";
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { useIntersectionObserver as J } from "../../hooks/useIntersectionObserver.js";
+import { Expander as K } from "../expander/expander.js";
+import { NodeItemIcon as Q } from "../node-icon/node-item-icon.js";
+import { NodeAvatar as U } from "../node-icon/node-avatar.js";
+import { NodeLabel as L } from "../node-label/node-label.js";
+import { TruncatedTooltipText as W } from "../truncated-tooltip-text/truncated-tooltip-text.js";
+import '../../../../styles/content-node.css';const X = "_loader_1xxrm_1", Y = "_content_1xxrm_9", Z = "_title_1xxrm_15", z = "_subtitle_1xxrm_67", ee = "_tooltip_1xxrm_83", n = {
+  loader: X,
+  content: Y,
   "title-wrapper": "_title-wrapper_1xxrm_15",
-  title: U,
+  title: Z,
   "title--small": "_title--small_1xxrm_29",
   "title--selected": "_title--selected_1xxrm_38",
   "title--large": "_title--large_1xxrm_48",
-  subtitle: V,
-  tooltip: W
+  subtitle: z,
+  tooltip: ee
 };
-function ce({
+function be({
   element: {
-    name: i,
-    metadata: t
+    name: c,
+    metadata: l
   },
-  level: m,
-  getNodeProps: _,
-  handleSelect: f,
-  handleExpand: O,
-  isBranch: w,
-  isExpanded: p,
-  isDisabled: c,
-  isSelected: u,
+  level: u,
+  getNodeProps: x,
+  handleSelect: _,
+  handleExpand: R,
+  isBranch: y,
+  isExpanded: f,
+  isDisabled: a,
+  isSelected: N,
   size: o,
-  withIcon: N,
-  containsSelection: E
+  withIcon: v,
+  containsSelection: V
 }) {
-  const L = M(), v = x(null), h = x(null), b = x(null), {
-    subtitle: r,
-    isLoading: T = !1,
-    withDivider: $ = !1,
-    variant: g,
-    selectable: I = !0
-  } = t, d = A(() => _({
-    onClick: f
-  }), [_, f]), y = q(v), C = !c && !p && E, R = {
-    [`data-${S}`]: !0,
-    [`data-${G}`]: T
-  }, D = /* @__PURE__ */ a("div", {
-    ...d,
-    className: s("node", e.node, e[`node-${o}-level${m - 1}`], e[`node--${o}`], {
-      [e[`node--${o}-extraData`]]: !!r,
-      [e["node--focused"]]: d.className.includes("tree-node--focused"),
-      [e["node--selected"]]: u || C,
-      [e["node--disabled"]]: c,
+  const k = q(), h = m(null), T = m(null), $ = m(null), b = m(null), {
+    isLoading: g = !1,
+    selectable: I = !0,
+    variant: r
+  } = l, {
+    labelName: w,
+    labelValue: D,
+    subtitle: i,
+    withDivider: O
+  } = r === "labeled" ? {
+    labelName: l.labelName,
+    labelValue: l.labelValue,
+    subtitle: void 0,
+    withDivider: !1
+  } : {
+    labelName: void 0,
+    labelValue: void 0,
+    subtitle: l.subtitle,
+    withDivider: l.withDivider || !1
+  }, s = P(() => x({
+    onClick: _
+  }), [x, _]), j = J(h), C = !a && !f && V, A = {
+    [`data-${B}`]: !0,
+    [`data-${F}`]: g
+  }, E = !!i || r === "labeled", M = /* @__PURE__ */ p("div", {
+    ...s,
+    className: d("node", e.node, e[`node-${o}-level${u - 1}`], e[`node--${o}`], {
+      [e[`node--${o}-extraData`]]: E,
+      [e["node--focused"]]: s.className.includes("tree-node--focused"),
+      [e["node--selected"]]: N || C,
+      [e["node--disabled"]]: a,
       [e["node--nonselectable"]]: !I,
-      "node--with-divider": $
+      "node--with-divider": O
     }),
-    "data-target-id": t == null ? void 0 : t.dataTargetId,
-    children: [w && /* @__PURE__ */ n("div", {
-      className: s(e.expander, e[`expander-level${m - 1}`], e[`expander-${o}`]),
-      children: T ? /* @__PURE__ */ n(k, {
-        "aria-label": L.formatMessage(P.branchContentLoaderLabel),
-        className: l.loader,
+    "data-target-id": l == null ? void 0 : l.dataTargetId,
+    children: [y && /* @__PURE__ */ t("div", {
+      className: d(e.expander, e[`expander-level${u - 1}`], e[`expander-${o}`]),
+      children: g ? /* @__PURE__ */ t(G, {
+        "aria-label": k.formatMessage(H.branchContentLoaderLabel),
+        className: n.loader,
         size: o === "small" ? "small" : "medium"
-      }) : /* @__PURE__ */ n(B, {
-        dataTargetId: t != null && t.dataTargetId ? `${t.dataTargetId}:${p ? "collapse" : "expand"}` : void 0,
-        disabled: c,
-        expanded: p,
-        onClick: O,
+      }) : /* @__PURE__ */ t(K, {
+        dataTargetId: l != null && l.dataTargetId ? `${l.dataTargetId}:${f ? "collapse" : "expand"}` : void 0,
+        disabled: a,
+        expanded: f,
+        onClick: R,
         size: o
       })
-    }), /* @__PURE__ */ a("div", {
-      className: s(l.content),
-      children: [N && g === "content" && /* @__PURE__ */ n(F, {
-        iconType: t.iconType,
+    }), /* @__PURE__ */ p("div", {
+      className: d(n.content),
+      children: [v && r === "content" && /* @__PURE__ */ t(Q, {
+        iconType: l.iconType,
         size: o
-      }), N && g === "user" && /* @__PURE__ */ n(H, {
-        avatarSrc: t.avatarSrc,
-        badge: t.badge,
-        nodeTitle: i,
+      }), v && r === "user" && /* @__PURE__ */ t(U, {
+        avatarSrc: l.avatarSrc,
+        badge: l.badge,
+        nodeTitle: c,
         size: o
-      }), /* @__PURE__ */ a("div", {
-        className: l["title-wrapper"],
-        children: [/* @__PURE__ */ n("span", {
-          ref: h,
-          className: s(l.title, l[`title--${o}`], {
-            [l["title--selected"]]: u || C
+      }), /* @__PURE__ */ p("div", {
+        className: n["title-wrapper"],
+        children: [r === "labeled" && /* @__PURE__ */ t(L, {
+          ref: b,
+          labelName: w,
+          labelValue: D
+        }), /* @__PURE__ */ t("span", {
+          ref: T,
+          className: d(n.title, n[`title--${o}`], {
+            [n["title--selected"]]: N || C
           }),
+          children: c
+        }), i && /* @__PURE__ */ t("span", {
+          ref: $,
+          className: n.subtitle,
           children: i
-        }), r && /* @__PURE__ */ n("span", {
-          ref: b,
-          className: l.subtitle,
-          children: r
         })]
       })]
     })]
-  }), j = /* @__PURE__ */ n("div", {
-    ...d,
-    className: s("node", e.node, e[`node-${o}-level${m - 1}`], e[`node--${o}`], {
-      [e[`node--${o}-extraData`]]: !!r,
-      [e["node--focused"]]: d.className.includes("tree-node--focused"),
-      [e["node--selected"]]: d.className.includes("tree-node--selected"),
-      [e["node--disabled"]]: c,
+  }), S = /* @__PURE__ */ t("div", {
+    ...s,
+    className: d("node", e.node, e[`node-${o}-level${u - 1}`], e[`node--${o}`], {
+      [e[`node--${o}-extraData`]]: E,
+      [e["node--focused"]]: s.className.includes("tree-node--focused"),
+      [e["node--selected"]]: s.className.includes("tree-node--selected"),
+      [e["node--disabled"]]: a,
       [e["node--nonselectable"]]: !I,
-      "node--with-divider": $
+      "node--with-divider": O
     }),
-    "data-target-id": t == null ? void 0 : t.dataTargetId,
-    children: i
+    "data-target-id": l == null ? void 0 : l.dataTargetId,
+    children: c
   });
-  return /* @__PURE__ */ n("div", {
-    ref: v,
-    ...R,
-    children: y ? j : /* @__PURE__ */ n(J, {
-      subtitleElementRef: b,
-      textElementRef: h,
-      tooltipContent: /* @__PURE__ */ a("div", {
-        className: l.tooltip,
-        children: [/* @__PURE__ */ n("span", {
+  return /* @__PURE__ */ t("div", {
+    ref: h,
+    ...A,
+    children: j ? S : /* @__PURE__ */ t(W, {
+      labelElementRef: b,
+      subtitleElementRef: $,
+      textElementRef: T,
+      tooltipContent: /* @__PURE__ */ p("div", {
+        className: n.tooltip,
+        children: [r === "labeled" && /* @__PURE__ */ t(L, {
+          ref: b,
+          color: "textOnDarkDefault",
+          isInTooltip: !0,
+          labelName: w,
+          labelValue: D
+        }), /* @__PURE__ */ t("span", {
+          children: c
+        }), i && /* @__PURE__ */ t("span", {
           children: i
-        }), r && /* @__PURE__ */ n("span", {
-          children: r
         })]
       }),
-      children: D
+      children: M
     })
   });
 }
 export {
-  ce as ContentNode
+  be as ContentNode
 };

package/dist/esm/lib/components/node-label/index.js

@@ -0,0 +1,4 @@
+import { NodeLabel as r } from "./node-label.js";
+export {
+  r as NodeLabel
+};

package/dist/esm/lib/components/node-label/node-label.js

@@ -0,0 +1,34 @@
+import { Text as l } from "@box/blueprint-web";
+import i from "clsx";
+import { forwardRef as p } from "react";
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import '../../../../styles/node-label.css';const m = "_label_km4kd_1", b = {
+  label: m
+}, v = /* @__PURE__ */ p((o, r) => {
+  const {
+    color: e = "textOnLightSecondary",
+    isInTooltip: s = !1,
+    labelName: t,
+    labelValue: n
+  } = o;
+  return /* @__PURE__ */ c("div", {
+    ref: r,
+    className: i({
+      [b.label]: !s
+    }),
+    children: [/* @__PURE__ */ a(l, {
+      as: "span",
+      color: e,
+      variant: "labelBold",
+      children: t.toUpperCase()
+    }), /* @__PURE__ */ a(l, {
+      as: "span",
+      color: e,
+      variant: "label",
+      children: ` / ${n.toUpperCase()}`
+    })]
+  });
+});
+export {
+  v as NodeLabel
+};

package/dist/esm/lib/components/truncated-tooltip-text/truncated-tooltip-text.js

@@ -1,26 +1,27 @@
-import { Tooltip as d } from "@box/blueprint-web";
-import { useState as a, useLayoutEffect as f } from "react";
-import { jsx as T } from "react/jsx-runtime";
-function L({
+import { Tooltip as a } from "@box/blueprint-web";
+import { useState as f, useLayoutEffect as T } from "react";
+import { jsx as p } from "react/jsx-runtime";
+function h({
+  labelElementRef: o,
   textElementRef: e,
-  subtitleElementRef: o,
-  tooltipContent: s,
-  children: n
+  subtitleElementRef: n,
+  tooltipContent: c,
+  children: s
 }) {
-  const [c, i] = a(!1);
-  return f(() => {
+  const [i, u] = f(!1);
+  return T(() => {
     const t = () => {
-      const u = [e.current, o.current].some((r) => r && r.scrollWidth > r.offsetWidth);
-      i(u);
+      const d = [e.current, n.current, o.current].some((r) => r && r.scrollWidth > r.offsetWidth);
+      u(d);
     };
     return t(), window.addEventListener("resize", t), () => {
       window.removeEventListener("resize", t);
     };
-  }, [e, o]), c ? /* @__PURE__ */ T(d, {
-    content: s,
-    children: n
-  }) : n;
+  }, [e, n, o]), i ? /* @__PURE__ */ p(a, {
+    content: c,
+    children: s
+  }) : s;
 }
 export {
-  L as TruncatedTooltipText
+  h as TruncatedTooltipText
 };

package/dist/esm/lib/tree.js

@@ -1,122 +1,129 @@
-import { TooltipProvider as L } from "@box/blueprint-web";
-import g from "clsx";
-import { useRef as h, useEffect as c, useCallback as w } from "react";
+import { TooltipProvider as g } from "@box/blueprint-web";
+import b from "clsx";
+import { useRef as h, useEffect as u, useCallback as w } from "react";
 import S from "react-accessible-treeview";
-import { preventDisabledNodeExpanding as p, preventLoadingContentNodeExpanding as v, serviceNodeKeyboardHandler as D, serviceNodeClickHandler as x } from "./utils.js";
+import { preventDisabledNodeExpanding as E, preventLoadingContentNodeExpanding as y, serviceNodeKeyboardHandler as x, serviceNodeClickHandler as C } from "./utils.js";
 import { jsx as t } from "react/jsx-runtime";
-import { useSelectionInheritance as C } from "./hooks/useSelectionInheritance.js";
+import { useSelectionInheritance as R } from "./hooks/useSelectionInheritance.js";
 import { ContentNode as M } from "./components/content-node/content-node.js";
-import { ServiceNodeWrapper as m } from "./components/service-node-wrapper/service-node-wrapper.js";
-import { LoadMoreNode as R } from "./components/load-more-node/load-more-node.js";
-import { ReloadNode as H } from "./components/reload-node/reload-node.js";
-import { LoadingNode as T } from "./components/loading-node/loading-node.js";
-import '../../styles/tree.css';const _ = "_tree_17956_1", K = {
-  tree: _
+import { ServiceNodeWrapper as v } from "./components/service-node-wrapper/service-node-wrapper.js";
+import { LoadMoreNode as H } from "./components/load-more-node/load-more-node.js";
+import { ReloadNode as T } from "./components/reload-node/reload-node.js";
+import { LoadingNode as _ } from "./components/loading-node/loading-node.js";
+import '../../styles/tree.css';const K = "_tree_17956_1", P = {
+  tree: K
+}, j = (d, s, a) => (o) => {
+  const {
+    element: m,
+    isDisabled: i
+  } = o, {
+    id: c,
+    metadata: f,
+    parent: l
+  } = m, {
+    variant: n
+  } = f;
+  if (n === "content" || n === "user" || n === "labeled") {
+    const r = {
+      ...o,
+      size: d,
+      withIcon: s
+    };
+    return /* @__PURE__ */ t(M, {
+      ...r,
+      containsSelection: a.includes(c)
+    });
+  }
+  if (n === "loadMore") {
+    const r = {
+      ...o,
+      size: d
+    };
+    return /* @__PURE__ */ t(v, {
+      isDisabled: i,
+      parentId: l,
+      variant: "loadMore",
+      children: /* @__PURE__ */ t(H, {
+        ...r
+      })
+    });
+  }
+  if (n === "reload") {
+    const r = {
+      ...o,
+      size: d
+    };
+    return /* @__PURE__ */ t(v, {
+      isDisabled: i,
+      parentId: l,
+      variant: "reload",
+      children: /* @__PURE__ */ t(T, {
+        ...r
+      })
+    });
+  }
+  if (n === "loading") {
+    const r = {
+      ...o,
+      size: d
+    };
+    return /* @__PURE__ */ t(v, {
+      isDisabled: i,
+      variant: "loading",
+      children: /* @__PURE__ */ t(_, {
+        ...r
+      })
+    });
+  }
+  return null;
 };
-function U({
-  "aria-label": u,
-  size: o = "small",
-  data: i,
-  withIcons: b = !1,
-  onExpand: N,
-  onSelect: l,
-  onLoadData: f,
-  className: k,
-  multiSelect: E = !1,
-  ...a
+function X({
+  "aria-label": d,
+  size: s = "small",
+  data: a,
+  withIcons: o = !1,
+  onExpand: m,
+  onSelect: i,
+  onLoadData: c,
+  className: f,
+  multiSelect: l = !1,
+  ...n
 }) {
-  const s = h(null), {
-    selectionInheritors: y,
-    getSelectionInheritors: d
-  } = C();
-  c(() => {
-    const e = s.current;
-    return e && (e.addEventListener("keydown", p), e.addEventListener("keydown", v)), () => {
-      e && (e.removeEventListener("keydown", p), e.removeEventListener("keydown", v));
+  const r = h(null), {
+    selectionInheritors: I,
+    getSelectionInheritors: p
+  } = R();
+  u(() => {
+    const e = r.current;
+    return e && (e.addEventListener("keydown", E), e.addEventListener("keydown", y)), () => {
+      e && (e.removeEventListener("keydown", E), e.removeEventListener("keydown", y));
     };
-  }), c(() => {
-    const e = s.current, n = D(f), r = x(f);
-    return e && (e.addEventListener("keydown", n), e.addEventListener("click", r)), () => {
-      e && (e.removeEventListener("keydown", n), e.removeEventListener("click", r));
+  }), u(() => {
+    const e = r.current, N = x(c), k = C(c);
+    return e && (e.addEventListener("keydown", N), e.addEventListener("click", k)), () => {
+      e && (e.removeEventListener("keydown", N), e.removeEventListener("click", k));
     };
-  }), c(() => {
-    d(i, a.selectedIds || a.defaultSelectedIds);
+  }), u(() => {
+    p(a, n.selectedIds || n.defaultSelectedIds);
   }, []);
-  const I = w((e) => {
-    d(i, Array.from(e.treeState.selectedIds)), l && l(e);
-  }, [l, i, d]);
-  return /* @__PURE__ */ t(L, {
+  const L = w((e) => {
+    p(a, Array.from(e.treeState.selectedIds)), i && i(e);
+  }, [i, a, p]);
+  return /* @__PURE__ */ t(g, {
     children: /* @__PURE__ */ t(S, {
-      ref: s,
-      "aria-label": u,
-      className: g(K.tree, k),
-      data: i,
-      multiSelect: E,
-      nodeRenderer: (e) => {
-        const {
-          variant: n
-        } = e.element.metadata;
-        if (n === "content" || n === "user") {
-          const r = {
-            ...e,
-            size: o,
-            withIcon: b
-          };
-          return /* @__PURE__ */ t(M, {
-            ...r,
-            containsSelection: y.includes(e.element.id)
-          });
-        }
-        if (n === "loadMore") {
-          const r = {
-            ...e,
-            size: o
-          };
-          return /* @__PURE__ */ t(m, {
-            isDisabled: e.isDisabled,
-            parentId: e.element.parent,
-            variant: "loadMore",
-            children: /* @__PURE__ */ t(R, {
-              ...r
-            })
-          });
-        }
-        if (n === "reload") {
-          const r = {
-            ...e,
-            size: o
-          };
-          return /* @__PURE__ */ t(m, {
-            isDisabled: e.isDisabled,
-            parentId: e.element.parent,
-            variant: "reload",
-            children: /* @__PURE__ */ t(H, {
-              ...r
-            })
-          });
-        }
-        if (n === "loading") {
-          const r = {
-            ...e,
-            size: o
-          };
-          return /* @__PURE__ */ t(m, {
-            isDisabled: e.isDisabled,
-            variant: "loading",
-            children: /* @__PURE__ */ t(T, {
-              ...r
-            })
-          });
-        }
-        return null;
-      },
-      onExpand: N,
-      onSelect: I,
-      ...a
+      ref: r,
+      "aria-label": d,
+      className: b(P.tree, f),
+      data: a,
+      multiSelect: l,
+      nodeRenderer: j(s, o, I),
+      onExpand: m,
+      onSelect: L,
+      ...n
     })
   });
 }
 export {
-  U as Tree,
-  U as default
+  X as Tree,
+  X as default
 };

package/dist/styles/node-label.css

@@ -0,0 +1 @@
+._label_km4kd_1{margin-bottom:.125rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400;font-size:.625rem;font-family:Lato,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;line-height:1rem;letter-spacing:.0375rem;text-transform:none;text-decoration:none}

package/dist/types/lib/components/node-label/index.d.ts

@@ -0,0 +1 @@
+export { NodeLabel } from './node-label';

package/dist/types/lib/components/node-label/node-label.d.ts

@@ -0,0 +1,6 @@
+import { TextProps } from '@box/blueprint-web';
+export declare const NodeLabel: import('react').ForwardRefExoticComponent<Pick<TextProps, "color"> & {
+    isInTooltip?: boolean;
+    labelName: string;
+    labelValue: string;
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/lib/components/truncated-tooltip-text/truncated-tooltip-text.d.ts

@@ -1,8 +1,9 @@
 type TruncatedTooltipTextProps = {
+    labelElementRef: React.MutableRefObject<HTMLElement>;
     textElementRef: React.MutableRefObject<HTMLElement>;
     subtitleElementRef: React.MutableRefObject<HTMLElement>;
     tooltipContent: string | React.ReactNode;
     children: React.ReactElement;
 };
-export declare function TruncatedTooltipText({ textElementRef, subtitleElementRef, tooltipContent, children, }: TruncatedTooltipTextProps): import("react/jsx-runtime").JSX.Element;
+export declare function TruncatedTooltipText({ labelElementRef, textElementRef, subtitleElementRef, tooltipContent, children, }: TruncatedTooltipTextProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/lib/hooks/useSelectionInheritance.d.ts

@@ -1,6 +1,6 @@
 import { NodeId } from 'react-accessible-treeview';
-import { ContentNode, LoadMoreNode, LoadingNode, Node, ReloadNode } from '../types';
+import { ContentNode, LoadMoreNode, LoadingNode, Node, LabeledNode, ReloadNode } from '../types';
 export declare const useSelectionInheritance: () => {
     selectionInheritors: NodeId[];
-    getSelectionInheritors: (data: (Node | ContentNode | LoadMoreNode | LoadingNode | ReloadNode)[], selectedIds?: (string | NodeId)[]) => void;
+    getSelectionInheritors: (data: (Node | ContentNode | LabeledNode | LoadMoreNode | LoadingNode | ReloadNode)[], selectedIds?: (string | NodeId)[]) => void;
 };

package/dist/types/lib/stories/shared.d.ts

@@ -1,5 +1,5 @@
 import { ComponentRecord } from '@box/storybook-utils';
-import { ContentNode, LoadingNode, LoadMoreNode, ReloadNode, TreeProps } from '../types';
+import { ContentNode, LoadMoreNode, LoadingNode, ReloadNode, TreeProps } from '../types';
 declare const rootNode: ContentNode;
 declare const dataWithContentNodes: ContentNode[];
 declare const dataWithContentNodeWithTitle: ContentNode[];

package/dist/types/lib/types.d.ts

@@ -1,7 +1,7 @@
 import { itemIconTable } from '@box/item-icon';
 import { INode, INodeRendererProps, ITreeViewOnSelectProps, ITreeViewProps, NodeId } from 'react-accessible-treeview';
 type Size = 'small' | 'large';
-type NodeVariant = 'user' | 'content' | 'loadMore' | 'loading' | 'reload';
+type NodeVariant = 'user' | 'content' | 'labeled' | 'loadMore' | 'loading' | 'reload';
 type Badge = 'admin' | 'coadmin';
 type IconType = keyof typeof itemIconTable | 'trash';
 interface Node extends INode {
@@ -32,6 +32,16 @@ interface ContentNode extends INode {
         selectable?: boolean;
     };
 }
+interface LabeledNode extends INode {
+    metadata: {
+        variant: 'labeled';
+        dataTargetId?: string;
+        isLoading?: boolean;
+        labelName: string;
+        labelValue: string;
+        selectable?: boolean;
+    };
+}
 interface LoadMoreNode extends INode {
     metadata: {
         variant: 'loadMore';
@@ -50,7 +60,7 @@ interface LoadingNode extends INode {
 }
 interface TreeProps extends Omit<ITreeViewProps, 'nodeRenderer' | 'propagateSelectUpwards' | 'onLoadData'> {
     'aria-label': string;
-    data: (Node | UserNode | ContentNode | LoadMoreNode | LoadingNode | ReloadNode)[];
+    data: (Node | UserNode | ContentNode | LabeledNode | LoadMoreNode | LoadingNode | ReloadNode)[];
     size?: Size;
     withIcons?: boolean;
     onLoadData?: (id: NodeId) => void;
@@ -58,10 +68,10 @@ interface TreeProps extends Omit<ITreeViewProps, 'nodeRenderer' | 'propagateSele
 interface NodeProps extends INodeRendererProps {
     size: Size;
     withIcon: boolean;
-    element: Node | UserNode | ContentNode | LoadMoreNode | LoadingNode | ReloadNode;
+    element: Node | UserNode | ContentNode | LabeledNode | LoadMoreNode | LoadingNode | ReloadNode;
 }
 interface ContentNodeProps extends NodeProps {
-    element: ContentNode | UserNode;
+    element: ContentNode | LabeledNode | UserNode;
     containsSelection: boolean;
 }
 interface LoadMoreNodeProps extends NodeProps {
@@ -73,4 +83,4 @@ interface ReloadNodeProps extends NodeProps {
 interface LoadingNodeProps extends NodeProps {
     element: LoadingNode;
 }
-export { ContentNode, ContentNodeProps, LoadingNode, LoadingNodeProps, LoadMoreNode, LoadMoreNodeProps, Node, NodeProps, ReloadNode, ReloadNodeProps, UserNode, type Badge, type IconType, type INode, type ITreeViewOnSelectProps, type NodeId, type NodeVariant, type Size, type TreeProps, };
+export { ContentNode, ContentNodeProps, LoadingNode, LoadingNodeProps, LoadMoreNode, LoadMoreNodeProps, Node, NodeProps, LabeledNode, ReloadNode, ReloadNodeProps, UserNode, type Badge, type IconType, type INode, type ITreeViewOnSelectProps, type NodeId, type NodeVariant, type Size, type TreeProps, };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/tree",
-    "version": "0.45.0",
+    "version": "0.45.2",
     "peerDependencies": {
         "@box/blueprint-web": "^7.11.0",
         "@box/blueprint-web-assets": "^4.16.0",
@@ -11,9 +11,9 @@
         "react-intl": "^6.4.2"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^11.8.3",
+        "@box/blueprint-web": "^11.9.0",
         "@box/blueprint-web-assets": "^4.41.1",
-        "@box/item-icon": "^0.9.129",
+        "@box/item-icon": "^0.9.131",
         "@box/storybook-utils": "^0.12.0",
         "@faker-js/faker": "^8.4.1",
         "react": "^18.3.0",