@box/tree 0.46.0 → 0.47.0

package/dist/chunks/expander-with-loading.js

@@ -0,0 +1,42 @@
+import { useIntl as a } from "react-intl";
+import { LoadingIndicator as _ } from "@box/blueprint-web";
+import m from "../esm/lib/components/content-node/messages.js";
+import { jsx as r } from "react/jsx-runtime";
+import { Expander as x } from "../esm/lib/components/expander/expander.js";
+import '../styles/expander-with-loading.css';const c = "_loader_1xxrm_1", d = "_content_1xxrm_9", p = "_title_1xxrm_15", g = "_subtitle_1xxrm_67", b = "_tooltip_1xxrm_83", f = {
+  loader: c,
+  content: d,
+  "title-wrapper": "_title-wrapper_1xxrm_15",
+  title: p,
+  "title--small": "_title--small_1xxrm_29",
+  "title--selected": "_title--selected_1xxrm_38",
+  "title--large": "_title--large_1xxrm_48",
+  subtitle: g,
+  tooltip: b
+}, w = ({
+  metadata: t,
+  handleExpand: o,
+  isDisabled: i,
+  isExpanded: e,
+  isLoading: n,
+  size: l
+}) => {
+  const s = a();
+  return n ? /* @__PURE__ */ r(_, {
+    "aria-label": s.formatMessage(m.branchContentLoaderLabel),
+    className: f.loader,
+    size: l === "small" ? "small" : "medium"
+  }) : /* @__PURE__ */ r(x, {
+    ...(t == null ? void 0 : t.dataTargetId) && {
+      dataTargetId: `${t.dataTargetId}:${e ? "collapse" : "expand"}`
+    },
+    disabled: i,
+    expanded: e,
+    onClick: o,
+    size: l
+  });
+};
+export {
+  w as E,
+  f as c
+};

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

@@ -1,160 +1,137 @@
-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 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: Z,
-  "title--small": "_title--small_1xxrm_29",
-  "title--selected": "_title--selected_1xxrm_38",
-  "title--large": "_title--large_1xxrm_48",
-  subtitle: z,
-  tooltip: ee
-};
-function be({
+import r from "clsx";
+import { useRef as a, useMemo as P } from "react";
+import { CONTENT_NODE as W, CONTENT_NODE_LOADING 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 l } from "../../../../chunks/nodes.module.js";
+import { jsxs as u, jsx as o } 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 oe({
   element: {
-    name: c,
-    metadata: l
+    name: i,
+    metadata: e
   },
-  level: u,
-  getNodeProps: x,
-  handleSelect: _,
-  handleExpand: R,
-  isBranch: y,
-  isExpanded: f,
-  isDisabled: a,
-  isSelected: N,
-  size: o,
-  withIcon: v,
-  containsSelection: V
+  level: p,
+  getNodeProps: b,
+  handleSelect: m,
+  handleExpand: h,
+  isBranch: V,
+  isExpanded: v,
+  isDisabled: f,
+  isSelected: x,
+  size: t,
+  withIcon: L,
+  containsSelection: k
 }) {
-  const k = q(), h = m(null), T = m(null), $ = m(null), b = m(null), {
-    isLoading: g = !1,
-    selectable: I = !0,
-    variant: r
-  } = l, {
+  const T = a(null), D = a(null), $ = a(null), N = a(null), {
+    isLoading: E = !1,
+    selectable: O = !0,
+    variant: c
+  } = e, {
     labelName: w,
-    labelValue: D,
-    subtitle: i,
-    withDivider: O
-  } = r === "labeled" ? {
-    labelName: l.labelName,
-    labelValue: l.labelValue,
+    labelValue: I,
+    subtitle: s,
+    withDivider: _
+  } = c === "labeled" ? {
+    labelName: e.labelName,
+    labelValue: e.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": O
+    subtitle: e.subtitle,
+    withDivider: e.withDivider ?? !1
+  }, d = P(() => b({
+    onClick: m
+  }), [b, m]), j = H(T), C = !f && !v && k, y = {
+    [`data-${W}`]: !0,
+    [`data-${q}`]: E
+  }, A = !!s || c === "labeled", g = ["node", l.node, l[`node-${t}-level${p - 1}`], l[`node--${t}`], {
+    [l[`node--${t}-extraData`]]: A,
+    [l["node--focused"]]: d.className.includes("tree-node--focused"),
+    [l["node--disabled"]]: f,
+    [l["node--nonselectable"]]: !O,
+    "node--with-divider": _
+  }], G = /* @__PURE__ */ u("div", {
+    ...d,
+    className: r(g, {
+      [l["node--selected"]]: x || C
     }),
-    "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__ */ t(K, {
-        dataTargetId: l != null && l.dataTargetId ? `${l.dataTargetId}:${f ? "collapse" : "expand"}` : void 0,
-        disabled: a,
-        expanded: f,
-        onClick: R,
-        size: o
+    "data-target-id": e == null ? void 0 : e.dataTargetId,
+    children: [V && /* @__PURE__ */ o("div", {
+      className: r(l.expander, l[`expander-level${p - 1}`], l[`expander-${t}`]),
+      children: /* @__PURE__ */ o(B, {
+        handleExpand: h,
+        isDisabled: f,
+        isExpanded: v,
+        isLoading: E,
+        metadata: e,
+        size: t
       })
-    }), /* @__PURE__ */ p("div", {
-      className: d(n.content),
-      children: [v && r === "content" && /* @__PURE__ */ t(Q, {
-        iconType: l.iconType,
-        size: o
-      }), v && r === "user" && /* @__PURE__ */ t(U, {
-        avatarSrc: l.avatarSrc,
-        badge: l.badge,
-        nodeTitle: c,
-        size: o
-      }), /* @__PURE__ */ p("div", {
+    }), /* @__PURE__ */ u("div", {
+      className: r(n.content),
+      children: [L && /* @__PURE__ */ o(F, {
+        metadata: e,
+        name: i,
+        size: t
+      }), /* @__PURE__ */ u("div", {
         className: n["title-wrapper"],
-        children: [r === "labeled" && /* @__PURE__ */ t(L, {
-          ref: b,
+        ...!O && {
+          onClick: h
+        },
+        children: [c === "labeled" && /* @__PURE__ */ o(R, {
+          ref: N,
           labelName: w,
-          labelValue: D
-        }), /* @__PURE__ */ t("span", {
-          ref: T,
-          className: d(n.title, n[`title--${o}`], {
-            [n["title--selected"]]: N || C
+          labelValue: I
+        }), /* @__PURE__ */ o("span", {
+          ref: D,
+          className: r(n.title, n[`title--${t}`], {
+            [n["title--selected"]]: x || C
           }),
-          children: c
-        }), i && /* @__PURE__ */ t("span", {
+          children: i
+        }), s && /* @__PURE__ */ o("span", {
           ref: $,
           className: n.subtitle,
-          children: i
+          children: s
         })]
       })]
     })]
-  }), 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": O
+  }), M = /* @__PURE__ */ o("div", {
+    ...d,
+    className: r(g, {
+      [l["node--selected"]]: d.className.includes("tree-node--selected")
     }),
-    "data-target-id": l == null ? void 0 : l.dataTargetId,
-    children: c
+    "data-target-id": e == null ? void 0 : e.dataTargetId,
+    children: i
   });
-  return /* @__PURE__ */ t("div", {
-    ref: h,
-    ...A,
-    children: j ? S : /* @__PURE__ */ t(W, {
-      labelElementRef: b,
+  return /* @__PURE__ */ o("div", {
+    ref: T,
+    ...y,
+    children: j ? M : /* @__PURE__ */ o(J, {
+      labelElementRef: N,
       subtitleElementRef: $,
-      textElementRef: T,
-      tooltipContent: /* @__PURE__ */ p("div", {
+      textElementRef: D,
+      tooltipContent: /* @__PURE__ */ u("div", {
         className: n.tooltip,
-        children: [r === "labeled" && /* @__PURE__ */ t(L, {
-          ref: b,
+        children: [c === "labeled" && /* @__PURE__ */ o(R, {
+          ref: N,
           color: "textOnDarkDefault",
           isInTooltip: !0,
           labelName: w,
-          labelValue: D
-        }), /* @__PURE__ */ t("span", {
-          children: c
-        }), i && /* @__PURE__ */ t("span", {
+          labelValue: I
+        }), /* @__PURE__ */ o("span", {
           children: i
+        }), s && /* @__PURE__ */ o("span", {
+          children: s
         })]
       }),
-      children: M
+      children: G
     })
   });
 }
 export {
-  be as ContentNode
+  oe as ContentNode
 };

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

@@ -0,0 +1,9 @@
+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
+};

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

@@ -0,0 +1,24 @@
+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
+};

package/dist/types/lib/components/content-node/expander-with-loading.d.ts

@@ -0,0 +1,7 @@
+import { ContentNodeProps } from '@box/tree';
+type Props = Partial<ContentNodeProps> & {
+    isLoading: boolean;
+    metadata: ContentNodeProps['element']['metadata'];
+};
+export declare const ExpanderWithLoading: ({ metadata, handleExpand, isDisabled, isExpanded, isLoading, size }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/lib/components/content-node/variant-icon.d.ts

@@ -0,0 +1,7 @@
+import { ContentNodeProps } from '@box/tree';
+type Props = Partial<ContentNodeProps> & {
+    metadata: ContentNodeProps['element']['metadata'];
+    name: string;
+};
+export declare const VariantIcon: ({ name, metadata, size }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,8 +1,9 @@
 import { ComponentRecord } from '@box/storybook-utils';
-import { ContentNode, LoadMoreNode, LoadingNode, ReloadNode, TreeProps } from '../types';
+import { ContentNode, LoadingNode, LoadMoreNode, ReloadNode, TreeProps } from '../types';
 declare const rootNode: ContentNode;
 declare const dataWithContentNodes: ContentNode[];
 declare const dataWithContentNodeWithTitle: ContentNode[];
+declare const dataWithNonSelectableItems: ContentNode[];
 declare const dataWithContentNodeWithTitleAndSubtitle: ContentNode[];
 declare const dataWithContentNodeWithTitleAndExpander: ContentNode[];
 declare const dataWithContentNodeWithTitleSubtitleAndExpander: ContentNode[];
@@ -13,4 +14,4 @@ declare const dataWithReloadNode: (ContentNode | ReloadNode)[];
 declare const dataWithLoadingNode: (ContentNode | LoadingNode)[];
 declare const dataWithNestedNode: (ContentNode | LoadingNode)[];
 declare const nodesVariantsMap: ComponentRecord<Partial<TreeProps>>;
-export { dataWithContentNodeInLoadingState, dataWithContentNodes, dataWithContentNodeWithDivider, dataWithContentNodeWithTitle, dataWithContentNodeWithTitleAndExpander, dataWithContentNodeWithTitleAndSubtitle, dataWithContentNodeWithTitleSubtitleAndExpander, dataWithLoadingNode, dataWithLoadMoreNode, dataWithNestedNode, dataWithReloadNode, nodesVariantsMap, rootNode, };
+export { dataWithContentNodeInLoadingState, dataWithContentNodes, dataWithContentNodeWithDivider, dataWithContentNodeWithTitle, dataWithContentNodeWithTitleAndExpander, dataWithContentNodeWithTitleAndSubtitle, dataWithContentNodeWithTitleSubtitleAndExpander, dataWithLoadingNode, dataWithLoadMoreNode, dataWithNestedNode, dataWithNonSelectableItems, dataWithReloadNode, nodesVariantsMap, rootNode, };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/tree",
-    "version": "0.46.0",
+    "version": "0.47.0",
     "peerDependencies": {
         "@box/blueprint-web": "^7.11.0",
         "@box/blueprint-web-assets": "^4.16.0",