@box/tree 1.38.33 → 1.38.34

package/dist/chunks/reload-node.js

@@ -0,0 +1,40 @@
+import { t as e } from "./nodes.module.js";
+import t from "../esm/lib/components/reload-node/messages.js";
+import n from "clsx";
+import { InlineNotice as r, TextButton as i } from "@box/blueprint-web";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useIntl as c } from "react-intl";
+import { Loader as l } from "@box/blueprint-web-assets/icons/Fill";
+import '../styles/reload-node.css';var u = {
+	errorNotice: "_errorNotice_1frn3_2",
+	"errorNoticeText--large": "_errorNoticeText--large_1frn3_7",
+	"errorNoticeText--small": "_errorNoticeText--small_1frn3_17"
+};
+function d({ level: d, size: f, isDisabled: p, getNodeProps: m, element: h }) {
+	let g = c(), _ = m();
+	return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("div", {
+		className: e[`node-${f}-level${d - 1}`],
+		children: /* @__PURE__ */ o(r, {
+			className: u.errorNotice,
+			variant: "error",
+			variantIconAriaLabel: g.formatMessage(t.iconAriaLabel),
+			children: /* @__PURE__ */ o("span", {
+				className: u[`errorNoticeText--${f}`],
+				children: h.metadata.error || g.formatMessage(t.loadingError)
+			})
+		})
+	}), /* @__PURE__ */ o("div", {
+		..._,
+		className: n("node", e.node, e[`node-${f}-level${d - 1}`], e[`node--${f}`], {
+			[e["node--focused"]]: _.className.includes("tree-node--focused"),
+			[e["node--disabled"]]: p
+		}),
+		children: /* @__PURE__ */ o(i, {
+			"aria-label": g.formatMessage(t.reloadButtonAriaLabel, { nodeName: h.name }),
+			icon: l,
+			tabIndex: -1,
+			children: g.formatMessage(t.reloadButtonTitle)
+		})
+	})] });
+}
+export { d as t };

package/dist/chunks/skeleton.js

@@ -0,0 +1,14 @@
+import { Ghost as e } from "@box/blueprint-web";
+import { jsx as t } from "react/jsx-runtime";
+import { Size5 as n } from "@box/blueprint-web-assets/tokens/px-tokens";
+import '../styles/skeleton.css';var r = { skeleton: "_skeleton_10rap_1" }, i = 5;
+function a({ rows: a = i }) {
+	return /* @__PURE__ */ t("div", {
+		className: r.skeleton,
+		children: Array.from({ length: a }, (r, i) => /* @__PURE__ */ t(e, {
+			height: n,
+			variant: "pill"
+		}, i))
+	});
+}
+export { a as t };

package/dist/chunks/tree.js

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

package/dist/esm/index.js

@@ -1,10 +1,6 @@
-import { Tree as o } from "./lib/tree.js";
-import { InlineError as f } from "./lib/components/inline-error/inline-error.js";
-import { Error as n } from "./lib/components/error/error.js";
-import { Skeleton as x } from "./lib/components/skeleton/skeleton.js";
-export {
-  f as InlineError,
-  o as Tree,
-  n as TreeError,
-  x as TreeSkeleton
-};
+import { t as e } from "../chunks/error.js";
+import { t } from "../chunks/inline-error.js";
+import { t as n } from "../chunks/skeleton.js";
+import "./lib/components/index.js";
+import { t as r } from "../chunks/tree.js";
+export { t as InlineError, r as Tree, e as TreeError, n as TreeSkeleton };

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

@@ -1,137 +1,110 @@
-import r from "clsx";
-import { useRef as c, useMemo as P } from "react";
-import { CONTENT_NODE_LOADING as W, CONTENT_NODE as q } from "../../constants.js";
-import { E as B, c as n } from "../../../../chunks/expander-with-loading.js";
-import { VariantIcon as F } from "./variant-icon.js";
-import { s as e } from "../../../../chunks/nodes.module.js";
-import { jsxs as u, jsx as l } from "react/jsx-runtime";
-import { useIntersectionObserver as H } from "../../hooks/useIntersectionObserver.js";
-import { NodeLabel as R } from "../node-label/node-label.js";
-import { TruncatedTooltipText as J } from "../truncated-tooltip-text/truncated-tooltip-text.js";
-function te({
-  element: {
-    name: i,
-    metadata: t
-  },
-  level: N,
-  getNodeProps: p,
-  handleSelect: b,
-  handleExpand: h,
-  isBranch: V,
-  isExpanded: v,
-  isDisabled: m,
-  isSelected: x,
-  size: o,
-  withIcon: L,
-  containsSelection: k
-}) {
-  const T = c(null), D = c(null), $ = c(null), f = c(null), {
-    isLoading: E = !1,
-    selectable: O = !0,
-    variant: d
-  } = t, {
-    labelName: w,
-    labelValue: I,
-    subtitle: s,
-    withDivider: _
-  } = d === "labeled" ? {
-    labelName: t.labelName,
-    labelValue: t.labelValue,
-    subtitle: void 0,
-    withDivider: !1
-  } : {
-    labelName: void 0,
-    labelValue: void 0,
-    subtitle: t.subtitle,
-    withDivider: t.withDivider ?? !1
-  }, a = P(() => p({
-    onClick: b
-  }), [p, b]), j = H(T), C = !m && !v && k, y = {
-    [`data-${q}`]: !0,
-    [`data-${W}`]: E
-  }, A = !!s || d === "labeled", g = ["node", e.node, e[`node-${o}-level${N - 1}`], e[`node--${o}`], {
-    [e[`node--${o}-extraData`]]: A,
-    [e["node--focused"]]: a.className.includes("tree-node--focused"),
-    [e["node--disabled"]]: m,
-    [e["node--nonselectable"]]: !O,
-    "node--with-divider": _
-  }], G = /* @__PURE__ */ u("div", {
-    ...a,
-    className: r(g, {
-      [e["node--selected"]]: x || C
-    }),
-    "data-target-id": t?.dataTargetId,
-    children: [V && /* @__PURE__ */ l("div", {
-      className: r(e.expander, e[`expander-level${N - 1}`], e[`expander-${o}`]),
-      children: /* @__PURE__ */ l(B, {
-        handleExpand: h,
-        isDisabled: m,
-        isExpanded: v,
-        isLoading: E,
-        metadata: t,
-        size: o
-      })
-    }), /* @__PURE__ */ u("div", {
-      className: r(n.content),
-      children: [L && /* @__PURE__ */ l(F, {
-        metadata: t,
-        name: i,
-        size: o
-      }), /* @__PURE__ */ u("div", {
-        className: n["title-wrapper"],
-        ...!O && {
-          onClick: h
-        },
-        children: [d === "labeled" && /* @__PURE__ */ l(R, {
-          ref: f,
-          labelName: w,
-          labelValue: I
-        }), /* @__PURE__ */ l("span", {
-          ref: D,
-          className: r(n.title, n[`title--${o}`], {
-            [n["title--selected"]]: x || C
-          }),
-          children: i
-        }), s && /* @__PURE__ */ l("span", {
-          ref: $,
-          className: n.subtitle,
-          children: s
-        })]
-      })]
-    })]
-  }), M = /* @__PURE__ */ l("div", {
-    ...a,
-    className: r(g, {
-      [e["node--selected"]]: a.className.includes("tree-node--selected")
-    }),
-    "data-target-id": t?.dataTargetId,
-    children: i
-  });
-  return /* @__PURE__ */ l("div", {
-    ref: T,
-    ...y,
-    children: j ? M : /* @__PURE__ */ l(J, {
-      labelElementRef: f,
-      subtitleElementRef: $,
-      textElementRef: D,
-      tooltipContent: /* @__PURE__ */ u("div", {
-        className: n.tooltip,
-        children: [d === "labeled" && /* @__PURE__ */ l(R, {
-          ref: f,
-          color: "textOnDarkDefault",
-          isInTooltip: !0,
-          labelName: w,
-          labelValue: I
-        }), /* @__PURE__ */ l("span", {
-          children: i
-        }), s && /* @__PURE__ */ l("span", {
-          children: s
-        })]
-      }),
-      children: G
-    })
-  });
+import { CONTENT_NODE as e, CONTENT_NODE_LOADING as t } from "../../constants.js";
+import { useIntersectionObserver as n } from "../../hooks/useIntersectionObserver.js";
+import { TruncatedTooltipText as r } from "../truncated-tooltip-text/truncated-tooltip-text.js";
+import { n as i, t as a } from "../../../../chunks/expander-with-loading.js";
+import { VariantIcon as o } from "./variant-icon.js";
+import { t as s } from "../../../../chunks/nodes.module.js";
+import { t as c } from "../../../../chunks/node-label.js";
+import l from "clsx";
+import { useMemo as u, useRef as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+function m({ element: { name: m, metadata: h }, level: g, getNodeProps: _, handleSelect: v, handleExpand: y, isBranch: b, isExpanded: x, isDisabled: S, isSelected: C, size: w, withIcon: T, containsSelection: E }) {
+	let D = d(null), O = d(null), k = d(null), A = d(null), { isLoading: j = !1, selectable: M = !0, variant: N } = h, { labelName: P, labelValue: F, subtitle: I, withDivider: L } = N === "labeled" ? {
+		labelName: h.labelName,
+		labelValue: h.labelValue,
+		subtitle: void 0,
+		withDivider: !1
+	} : {
+		labelName: void 0,
+		labelValue: void 0,
+		subtitle: h.subtitle,
+		withDivider: h.withDivider ?? !1
+	}, R = u(() => _({ onClick: v }), [_, v]), z = n(D), B = !S && !x && E, V = {
+		[`data-${e}`]: !0,
+		[`data-${t}`]: j
+	}, H = !!I || N === "labeled", U = [
+		"node",
+		s.node,
+		s[`node-${w}-level${g - 1}`],
+		s[`node--${w}`],
+		{
+			[s[`node--${w}-extraData`]]: H,
+			[s["node--focused"]]: R.className.includes("tree-node--focused"),
+			[s["node--disabled"]]: S,
+			[s["node--nonselectable"]]: !M,
+			"node--with-divider": L
+		}
+	], W = /* @__PURE__ */ p("div", {
+		...R,
+		className: l(U, { [s["node--selected"]]: C || B }),
+		"data-target-id": h?.dataTargetId,
+		children: [b && /* @__PURE__ */ f("div", {
+			className: l(s.expander, s[`expander-level${g - 1}`], s[`expander-${w}`]),
+			children: /* @__PURE__ */ f(a, {
+				handleExpand: y,
+				isDisabled: S,
+				isExpanded: x,
+				isLoading: j,
+				metadata: h,
+				size: w
+			})
+		}), /* @__PURE__ */ p("div", {
+			className: l(i.content),
+			children: [T && /* @__PURE__ */ f(o, {
+				metadata: h,
+				name: m,
+				size: w
+			}), /* @__PURE__ */ p("div", {
+				className: i["title-wrapper"],
+				...!M && { onClick: y },
+				children: [
+					N === "labeled" && /* @__PURE__ */ f(c, {
+						ref: A,
+						labelName: P,
+						labelValue: F
+					}),
+					/* @__PURE__ */ f("span", {
+						ref: O,
+						className: l(i.title, i[`title--${w}`], { [i["title--selected"]]: C || B }),
+						children: m
+					}),
+					I && /* @__PURE__ */ f("span", {
+						ref: k,
+						className: i.subtitle,
+						children: I
+					})
+				]
+			})]
+		})]
+	}), G = /* @__PURE__ */ f("div", {
+		...R,
+		className: l(U, { [s["node--selected"]]: R.className.includes("tree-node--selected") }),
+		"data-target-id": h?.dataTargetId,
+		children: m
+	});
+	return /* @__PURE__ */ f("div", {
+		ref: D,
+		...V,
+		children: z ? G : /* @__PURE__ */ f(r, {
+			labelElementRef: A,
+			subtitleElementRef: k,
+			textElementRef: O,
+			tooltipContent: /* @__PURE__ */ p("div", {
+				className: i.tooltip,
+				children: [
+					N === "labeled" && /* @__PURE__ */ f(c, {
+						ref: A,
+						color: "textOnDarkDefault",
+						isInTooltip: !0,
+						labelName: P,
+						labelValue: F
+					}),
+					/* @__PURE__ */ f("span", { children: m }),
+					I && /* @__PURE__ */ f("span", { children: I })
+				]
+			}),
+			children: W
+		})
+	});
 }
-export {
-  te as ContentNode
-};
+export { m as ContentNode };

package/dist/esm/lib/components/content-node/expander-with-loading.js

@@ -1,9 +1,2 @@
-import "react-intl";
-import "@box/blueprint-web";
-import "./messages.js";
-import { E as d } from "../../../../chunks/expander-with-loading.js";
-import "react/jsx-runtime";
-import "../expander/expander.js";
-export {
-  d as ExpanderWithLoading
-};
+import { t as e } from "../../../../chunks/expander-with-loading.js";
+export { e as ExpanderWithLoading };

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

@@ -1,4 +1,2 @@
-import { ContentNode as t } from "./content-node.js";
-export {
-  t as ContentNode
-};
+import { ContentNode as e } from "./content-node.js";
+export { e as ContentNode };

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

@@ -1,10 +1,6 @@
 import { defineMessages as e } from "react-intl";
-const r = e({
-  branchContentLoaderLabel: {
-    id: "groupSharedFeatures.tree.branch.loaderLabel",
-    defaultMessage: "Loading content for branch"
-  }
-});
-export {
-  r as default
-};
+var t = e({ branchContentLoaderLabel: {
+	id: "groupSharedFeatures.tree.branch.loaderLabel",
+	defaultMessage: "Loading content for branch"
+} });
+export { t as default };

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

@@ -1,24 +1,16 @@
-import { jsx as t } from "react/jsx-runtime";
-import { NodeItemIcon as c } from "../node-icon/node-item-icon.js";
-import { NodeAvatar as i } from "../node-icon/node-avatar.js";
-const u = ({
-  name: e,
-  metadata: r,
-  size: o
-}) => {
-  const {
-    variant: n
-  } = r;
-  return n === "content" ? /* @__PURE__ */ t(c, {
-    iconType: r.iconType,
-    size: o
-  }) : n === "user" ? /* @__PURE__ */ t(i, {
-    avatarSrc: r.avatarSrc,
-    badge: r.badge,
-    nodeTitle: e,
-    size: o
-  }) : null;
-};
-export {
-  u as VariantIcon
+import { NodeAvatar as e } from "../node-icon/node-avatar.js";
+import { NodeItemIcon as t } from "../node-icon/node-item-icon.js";
+import { jsx as n } from "react/jsx-runtime";
+var r = ({ name: r, metadata: i, size: a }) => {
+	let { variant: o } = i;
+	return o === "content" ? /* @__PURE__ */ n(t, {
+		iconType: i.iconType,
+		size: a
+	}) : o === "user" ? /* @__PURE__ */ n(e, {
+		avatarSrc: i.avatarSrc,
+		badge: i.badge,
+		nodeTitle: r,
+		size: a
+	}) : null;
 };
+export { r as VariantIcon };

package/dist/esm/lib/components/error/error.js

@@ -1,34 +1,2 @@
-import { useIntl as i } from "react-intl";
-import { EmptyState as t, Text as s } from "@box/blueprint-web";
-import { Loader as m } from "@box/blueprint-web-assets/icons/Fill";
-import { Unplugged as a } from "@box/blueprint-web-assets/illustrations/Medium";
-import e from "./messages.js";
-import { jsx as r } from "react/jsx-runtime";
-import '../../../../styles/error.css';const l = "_error_pq9k8_1", c = {
-  error: l
-};
-function y({
-  onReload: n
-}) {
-  const o = i();
-  return /* @__PURE__ */ r(t, {
-    body: /* @__PURE__ */ r(s, {
-      as: "p",
-      children: o.formatMessage(e.errorBody)
-    }),
-    className: c.error,
-    heading: /* @__PURE__ */ r(s, {
-      as: "h2",
-      children: o.formatMessage(e.errorTitle)
-    }),
-    illustration: a,
-    children: /* @__PURE__ */ r(t.PrimaryAction, {
-      endIcon: m,
-      onClick: n,
-      children: o.formatMessage(e.reloadButton)
-    })
-  });
-}
-export {
-  y as Error
-};
+import { t as e } from "../../../../chunks/error.js";
+export { e as Error };

package/dist/esm/lib/components/error/index.js

@@ -1,4 +1,2 @@
-import { Error as e } from "./error.js";
-export {
-  e as TreeError
-};
+import { t as e } from "../../../../chunks/error.js";
+export { e as TreeError };

package/dist/esm/lib/components/error/messages.js

@@ -1,18 +1,16 @@
 import { defineMessages as e } from "react-intl";
-const a = e({
-  errorTitle: {
-    id: "groupSharedFeatures.tree.error.title",
-    defaultMessage: "Unable to load tree"
-  },
-  errorBody: {
-    id: "groupSharedFeatures.tree.error.body",
-    defaultMessage: "Reload to try again."
-  },
-  reloadButton: {
-    id: "groupSharedFeatures.tree.error.reload",
-    defaultMessage: "Reload"
-  }
+var t = e({
+	errorTitle: {
+		id: "groupSharedFeatures.tree.error.title",
+		defaultMessage: "Unable to load tree"
+	},
+	errorBody: {
+		id: "groupSharedFeatures.tree.error.body",
+		defaultMessage: "Reload to try again."
+	},
+	reloadButton: {
+		id: "groupSharedFeatures.tree.error.reload",
+		defaultMessage: "Reload"
+	}
 });
-export {
-  a as default
-};
+export { t as default };

package/dist/esm/lib/components/expander/expander.js

@@ -1,33 +1,2 @@
-import { IconButton as i } from "@box/blueprint-web";
-import { PointerChevron as p, PointerChevronRight as c } from "@box/blueprint-web-assets/icons/Fill";
-import { useIntl as x } from "react-intl";
-import o from "./messages.js";
-import { jsx as d } from "react/jsx-runtime";
-import '../../../../styles/expander.css';const f = {
-  "expander-small": "_expander-small_17erq_1",
-  "expander-large": "_expander-large_17erq_5"
-};
-function I({
-  onClick: t,
-  size: r,
-  disabled: n,
-  expanded: e,
-  dataTargetId: l
-}) {
-  const s = x(), m = (a) => {
-    a.stopPropagation(), t(a);
-  };
-  return /* @__PURE__ */ d(i, {
-    "aria-label": s.formatMessage(e ? o.collapse : o.expand),
-    className: f[`expander-${r}`],
-    "data-target-id": l,
-    disabled: n,
-    icon: e ? p : c,
-    onClick: m,
-    size: r === "small" ? "x-small" : "small",
-    tabIndex: -1
-  });
-}
-export {
-  I as Expander
-};
+import { t as e } from "../../../../chunks/expander.js";
+export { e as Expander };

package/dist/esm/lib/components/expander/index.js

@@ -1,4 +1,2 @@
-import { Expander as o } from "./expander.js";
-export {
-  o as Expander
-};
+import { t as e } from "../../../../chunks/expander.js";
+export { e as Expander };

package/dist/esm/lib/components/expander/messages.js

@@ -1,14 +1,12 @@
 import { defineMessages as e } from "react-intl";
-const s = e({
-  collapse: {
-    id: "groupSharedFeatures.tree.expander.collapse",
-    defaultMessage: "Collapse branch"
-  },
-  expand: {
-    id: "groupSharedFeatures.tree.expander.expand",
-    defaultMessage: "Expand branch"
-  }
+var t = e({
+	collapse: {
+		id: "groupSharedFeatures.tree.expander.collapse",
+		defaultMessage: "Collapse branch"
+	},
+	expand: {
+		id: "groupSharedFeatures.tree.expander.expand",
+		defaultMessage: "Expand branch"
+	}
 });
-export {
-  s as default
-};
+export { t as default };