npm - @frontify/fondue - Versions diffs - 12.0.0-beta.13 → 12.0.0-beta.16 - Mend

@frontify/fondue 12.0.0-beta.13 → 12.0.0-beta.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (55) hide show

package/dist/components/Tree/Node.es.js CHANGED Viewed

@@ -1,10 +1,10 @@
-import t, { useState as y, useRef as M, useLayoutEffect as Z } from "react";
-import { merge as c } from "../../utilities/merge.es.js";
-import { useDrag as q } from "react-dnd";
-import { DropZone as k } from "../DropZone/DropZone.es.js";
+import t, { useState as h, useRef as J, useLayoutEffect as K } from "react";
+import { merge as d } from "../../utilities/merge.es.js";
+import { useDrag as Q } from "react-dnd";
+import { DropZone as A } from "../DropZone/DropZone.es.js";
 import "../../utilities/dnd/DndWrapper.es.js";
-import { DropZonePosition as A } from "../../utilities/dnd/types.es.js";
-import { EditableText as G } from "../EditableText/EditableText.es.js";
+import { DropZonePosition as B } from "../../utilities/dnd/types.es.js";
+import { EditableText as U } from "../EditableText/EditableText.es.js";
 import "../../foundation/Icon/Generated/IconAdobeCreativeCloud.es.js";
 import "../../foundation/Icon/Generated/IconAdobeCreativeCloud12.es.js";
 import "../../foundation/Icon/Generated/IconAdobeCreativeCloud16.es.js";
@@ -1666,191 +1666,197 @@ import "../../foundation/Icon/Generated/IconWorkflowShapes20.es.js";
 import "../../foundation/Icon/Generated/IconWorkflowShapes24.es.js";
 import "../../foundation/Icon/Generated/IconWorkflowShapes32.es.js";
 import "../../foundation/Icon/IconsMap.es.js";
-import { Tooltip as J, TooltipPosition as K } from "../Tooltip/Tooltip.es.js";
-const Q = ({
+import { Tooltip as X, TooltipPosition as Y } from "../Tooltip/Tooltip.es.js";
+const _ = ({
   nodes: r,
-  activeIds: d,
+  activeIds: f,
   treeId: o,
   onClick: m,
   onDrop: i,
-  onEditableSave: s,
-  parentIds: e
-}) => r.map((l, p) => /* @__PURE__ */ t.createElement(X, {
-  key: l.id,
-  node: l,
-  nodeIndex: p,
-  activeIds: d,
+  onEditableSave: l,
+  onNodeExpand: s,
+  forceCaret: u,
+  parentIds: a
+}) => r.map((p, e) => /* @__PURE__ */ t.createElement(I, {
+  key: p.id,
+  node: p,
+  nodeIndex: e,
+  activeIds: f,
   onClick: m,
-  isFirst: p === 0,
+  isFirst: e === 0,
   onDrop: i,
-  onEditableSave: s,
-  parentIds: e,
+  onEditableSave: l,
+  onNodeExpand: s,
+  forceCaret: u,
+  parentIds: a,
   treeId: o
-})), U = (r, d) => {
+})), $ = (r, f) => {
   const o = (m, i) => {
     if (m.nodes && i) {
-      for (const s of m.nodes)
-        if (i.includes(s.id) || o(s, i))
+      for (const l of m.nodes)
+        if (i.includes(l.id) || o(l, i))
           return !0;
     }
     return !1;
   };
-  return o(r, d);
-}, X = ({
+  return o(r, f);
+}, I = ({
   node: r,
-  strong: d = !1,
+  strong: f = !1,
   activeIds: o,
   onClick: m,
   parentIds: i = [],
-  isFirst: s,
-  onDrop: e,
-  onEditableSave: l,
+  isFirst: l,
+  onDrop: s,
+  onEditableSave: u,
+  onNodeExpand: a,
   treeId: p
 }) => {
-  const { id: x, value: v, name: f, label: O, icon: h, nodes: g, actions: E, editable: T, badge: a, tooltipContent: j } = r, [{ opacity: P }, R] = q({
-    item: { id: x, value: v, name: f, label: O, icon: h, nodes: g, actions: E, editable: T, badge: a },
+  const { id: e, value: E, name: x, label: C, icon: N, nodes: b, actions: y, editable: H, badge: w, tooltipContent: O, forceCaret: P } = r, [{ opacity: R }, V] = Q({
+    item: { id: e, value: E, name: x, label: C, icon: N, nodes: b, actions: y, editable: H, badge: w },
     collect: (n) => ({
       opacity: n.isDragging() ? 0.4 : 1
     }),
     type: p,
-    canDrag: e !== void 0
-  }), [b, C] = y(U(r, o)), [V, H] = y(!1), w = o && o.length > 0 && o.includes(x), z = () => H(!0), B = () => H(!1), F = () => {
-    if (!v) {
-      C(!b);
+    canDrag: s !== void 0
+  }), [v, T] = h($(r, o)), [z, j] = h(!1), c = o && o.length > 0 && o.includes(e), F = () => j(!0), S = () => j(!1), W = () => {
+    if (!E) {
+      T(!v);
       return;
     }
-    m && m(x);
-  }, S = (n) => {
-    n.stopPropagation(), C(!b);
-  }, W = () => /* @__PURE__ */ t.createElement(J, {
-    disabled: !j,
-    content: j,
-    position: K.Right,
+    m && m(e);
+  }, [D, M] = h(!1), Z = (n) => {
+    D || a == null || a(e), M(!0), n.stopPropagation(), T(!v);
+  }, q = () => /* @__PURE__ */ t.createElement(X, {
+    disabled: !O,
+    content: O,
+    position: Y.Right,
     withArrow: !0,
     triggerElement: /* @__PURE__ */ t.createElement("div", {
       "data-test-id": "node-badge",
-      className: c([
+      className: d([
         "tw-flex tw-justify-center tw-items-center tw-ml-2 tw-text-text-weak",
-        (a == null ? void 0 : a.props.size) && "tw-w-8 tw-h-5 tw-bg-box-neutral tw-rounded-full"
+        (w == null ? void 0 : w.props.size) && "tw-w-8 tw-h-5 tw-bg-box-neutral tw-rounded-full"
       ])
-    }, a)
-  }), u = M(null), [L, D] = y(!1);
-  Z(() => (N(), window.addEventListener("resize", N), () => {
-    window.removeEventListener("resize", N);
+    }, w)
+  }), g = J(null), [L, G] = h(!1);
+  K(() => (k(), window.addEventListener("resize", k), () => {
+    window.removeEventListener("resize", k);
   }), []);
-  const N = () => {
-    if (u.current) {
-      const n = u.current.scrollWidth > u.current.clientWidth;
-      D(n);
+  const k = () => {
+    if (g.current) {
+      const n = g.current.scrollWidth > g.current.clientWidth;
+      G(n);
     }
   };
   return /* @__PURE__ */ t.createElement("li", {
     "data-test-id": "node",
-    ref: R,
-    style: { opacity: P }
-  }, s && /* @__PURE__ */ t.createElement(k, {
+    ref: V,
+    style: { opacity: R }
+  }, l && /* @__PURE__ */ t.createElement(A, {
     data: {
       targetItem: r,
-      position: A.Before
+      position: B.Before
     },
-    onDrop: e,
+    onDrop: s,
     treeId: p
-  }), /* @__PURE__ */ t.createElement(k, {
+  }), /* @__PURE__ */ t.createElement(A, {
     data: {
       targetItem: r,
-      position: A.Within
+      position: B.Within
     },
-    onDrop: e,
+    onDrop: s,
     treeId: p
   }, /* @__PURE__ */ t.createElement("div", {
-    className: c([
+    className: d([
       "tw-flex tw-py-2 tw-px-2.5 tw-no-underline tw-leading-5 tw-h-10",
-      d && "tw-font-bold",
-      v && !w && "tw-text-text hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover",
-      w && "tw-font-medium tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover hover:tw-text-box-selected-strong-inverse-hover"
+      f && "tw-font-bold",
+      E && !c && "tw-text-text hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover",
+      c && "tw-font-medium tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover hover:tw-text-box-selected-strong-inverse-hover"
     ]),
-    onMouseEnter: z,
-    onMouseLeave: B
+    onMouseEnter: F,
+    onMouseLeave: S
   }, /* @__PURE__ */ t.createElement("a", {
     "data-test-id": "node-link",
-    className: c([
+    className: d([
       "tw-flex tw-items-center tw-flex-grow tw-justify-between tw-cursor-pointer tw-h-6",
       i.length === 1 && "tw-pl-4",
       i.length > 1 && "tw-pl-8"
     ]),
-    "aria-selected": w,
-    onClick: F
+    "aria-selected": c,
+    onClick: W
   }, /* @__PURE__ */ t.createElement("div", {
     className: "tw-flex tw-flex-1 tw-space-x-1 tw-items-center tw-h-full"
   }, /* @__PURE__ */ t.createElement("span", {
     "data-test-id": "toggle",
     className: "tw-w-2 tw-h-3 tw-flex tw-items-center tw-justify-center",
-    onClick: S
-  }, g && /* @__PURE__ */ t.createElement("div", {
-    className: c([
+    onClick: Z
+  }, (b || P) && /* @__PURE__ */ t.createElement("div", {
+    className: d([
       "tw-transition-transform tw-w-0 tw-h-0 tw-text-black-100 tw-text-opacity-40 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong",
-      b ? "tw-rotate-90" : "",
-      w && "tw-text-box-selected-strong-inverse"
+      v ? "tw-rotate-90" : "",
+      c && "tw-text-box-selected-strong-inverse"
     ])
-  })), h && /* @__PURE__ */ t.createElement("span", {
+  })), N && /* @__PURE__ */ t.createElement("span", {
     className: "tw-flex tw-justify-center tw-items-center tw-w-5"
-  }, h), T && l ? /* @__PURE__ */ t.createElement("div", {
-    ref: u,
+  }, N), H && u ? /* @__PURE__ */ t.createElement("div", {
+    ref: g,
     className: "tw-relative tw-top-[0.2rem] tw-w-full tw-flex-1 tw-h-full"
-  }, /* @__PURE__ */ t.createElement(G, {
+  }, /* @__PURE__ */ t.createElement(U, {
     options: {
       additionalValues: r.id,
       enableDoubleClick: !0,
       isSlimInputField: !0,
       removeBoxPadding: !0
     },
-    onAdditionalValueSave: l,
+    onAdditionalValueSave: u,
     isOverflowing: !0
   }, /* @__PURE__ */ t.createElement("span", {
-    title: L ? f : "",
+    title: L ? x : "",
     className: "tw-max-w-full tw-absolute tw-top-[-0.08rem] tw-truncate"
-  }, f))) : /* @__PURE__ */ t.createElement("span", {
+  }, x))) : /* @__PURE__ */ t.createElement("span", {
     className: "tw-flex tw-items-center tw-flex-1 tw-relative tw-h-10",
-    title: L ? f : "",
+    title: L ? x : "",
     "data-test-id": "node-link-name"
   }, /* @__PURE__ */ t.createElement("span", {
-    ref: u,
+    ref: g,
     className: "tw-truncate tw-max-w-full tw-absolute"
-  }, f)), /* @__PURE__ */ t.createElement("span", null, a && W())), /* @__PURE__ */ t.createElement("div", {
+  }, x)), /* @__PURE__ */ t.createElement("span", null, w && q())), /* @__PURE__ */ t.createElement("div", {
     className: "tw-px-1.5"
   }, /* @__PURE__ */ t.createElement("span", {
     "data-test-id": "node-label",
-    className: c([
+    className: d([
       "tw-text-black-100 tw-text-opacity-40 tw-text-xs tw-font-normal",
-      w && "tw-text-box-selected-strong-inverse"
+      c && "tw-text-box-selected-strong-inverse"
     ])
-  }, O))), E && /* @__PURE__ */ t.createElement("div", {
-    className: c([
+  }, C))), y && /* @__PURE__ */ t.createElement("div", {
+    className: d([
       "tw-flex tw-items-center",
-      V || w ? "tw-visible tw-space-x-1.5" : "tw-invisible tw-w-0"
+      z || c ? "tw-visible tw-space-x-1.5" : "tw-invisible tw-w-0"
     ])
-  }, E.map((n) => n)))), g && b && /* @__PURE__ */ t.createElement("ul", {
+  }, y.map((n) => n)))), b && v && /* @__PURE__ */ t.createElement("ul", {
     className: "tw-p-0 tw-m-0 tw-font-sans tw-font-normal tw-list-none tw-text-left",
     "data-test-id": "sub-tree"
-  }, Q({
-    nodes: g,
+  }, _({
+    nodes: b,
     treeId: p,
     activeIds: o,
     onClick: m,
-    onDrop: e,
-    onEditableSave: l,
-    parentIds: [...i, x]
-  })), /* @__PURE__ */ t.createElement(k, {
+    onDrop: s,
+    onEditableSave: u,
+    onNodeExpand: a,
+    parentIds: [...i, e]
+  })), /* @__PURE__ */ t.createElement(A, {
     data: {
       targetItem: r,
-      position: A.After
+      position: B.After
     },
-    onDrop: e,
+    onDrop: s,
     treeId: p
   }));
 };
 export {
-  X as Node,
-  Q as renderNodeArray
+  I as Node,
+  _ as renderNodeArray
 };
 //# sourceMappingURL=Node.es.js.map

package/dist/components/Tree/Node.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Node.es.js","sources":["../../../src/components/Tree/Node.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport React, { ReactElement, useLayoutEffect, useRef, useState } from 'react';\nimport { merge } from '@utilities/merge';\nimport { useDrag } from 'react-dnd';\nimport { DropZone, OnDropCallback } from '@components/DropZone';\nimport { TreeFlatListItem } from '@components/Tree';\nimport { DraggableItem, DropZonePosition } from '@utilities/dnd';\nimport { EditableText } from '../EditableText';\nimport { Tooltip, TooltipPosition } from '../Tooltip';\n\nexport type RenderNodeArrayData = Omit<NodeProps, 'isFirst' \| 'strong' \| 'node'> & {\n nodes: DraggableItem<TreeNodeItem>[];\n};\n\nexport const renderNodeArray = ({\n nodes,\n activeIds,\n treeId,\n onClick,\n onDrop,\n onEditableSave,\n parentIds,\n}: RenderNodeArrayData) =>\n nodes.map((node, i) => (\n <Node\n key={node.id}\n node={node}\n nodeIndex={i}\n activeIds={activeIds}\n onClick={onClick}\n isFirst={i === 0}\n onDrop={onDrop}\n onEditableSave={onEditableSave}\n parentIds={parentIds}\n treeId={treeId}\n />\n ));\n\nexport interface TreeNodeItem extends TreeFlatListItem {\n nodes?: DraggableItem<TreeNodeItem>[];\n}\n\ntype NodeProps = {\n node: DraggableItem<TreeNodeItem>;\n strong?: boolean;\n nodeIndex?: number;\n activeIds?: NullableString[];\n parentIds?: string[];\n onClick: (id: NullableString) => void;\n isFirst: boolean;\n treeId: string;\n onDrop?: OnDropCallback<TreeNodeItem>;\n onEditableSave?: (targetItemId: string, value: string) => void;\n};\n\nconst getInitialShowNodesValue = (\n currentNode: DraggableItem<TreeNodeItem>,\n activeNodeIds?: NullableString[],\n): boolean => {\n const hasActiveChildNodes = (node: DraggableItem<TreeNodeItem>, activeIds?: NullableString[]): boolean => {\n if (node.nodes && activeIds) {\n for (const childNode of node.nodes) {\n if (activeIds.includes(childNode.id) \|\| hasActiveChildNodes(childNode, activeIds)) {\n return true;\n }\n }\n }\n return false;\n };\n\n return hasActiveChildNodes(currentNode, activeNodeIds);\n};\n\nexport const Node = ({\n node,\n strong = false,\n activeIds,\n onClick,\n parentIds = [],\n isFirst,\n onDrop,\n onEditableSave,\n treeId,\n}: NodeProps): ReactElement<NodeProps> => {\n const { id, value, name, label, icon, nodes, actions, editable, badge, tooltipContent } = node;\n const [{ opacity }, drag] = useDrag({\n item: { id, value, name, label, icon, nodes, actions, editable, badge },\n collect: (monitor) => ({\n opacity: monitor.isDragging() ? 0.4 : 1,\n }),\n type: treeId,\n canDrag: onDrop !== undefined,\n });\n const [showNodes, setShowNodes] = useState(getInitialShowNodesValue(node, activeIds));\n const [isHovered, setIsHovered] = useState(false);\n const selected = activeIds && activeIds.length > 0 && activeIds.includes(id);\n\n const setHoveredTrue = () => setIsHovered(true);\n const setHoveredFalse = () => setIsHovered(false);\n const onNodeClick = () => {\n if (!value) {\n setShowNodes(!showNodes);\n return;\n }\n\n if (onClick) {\n onClick(id);\n }\n };\n const toggleNodesVisibility = (event: React.MouseEvent) => {\n event.stopPropagation();\n setShowNodes(!showNodes);\n };\n\n const insertBadge = () => {\n return (\n <Tooltip\n disabled={!tooltipContent}\n content={tooltipContent}\n position={TooltipPosition.Right}\n withArrow\n triggerElement={\n <div\n data-test-id=\"node-badge\"\n className={merge([\n 'tw-flex tw-justify-center tw-items-center tw-ml-2 tw-text-text-weak',\n badge?.props.size && 'tw-w-8 tw-h-5 tw-bg-box-neutral tw-rounded-full',\n ])}\n >\n {badge}\n </div>\n }\n />\n );\n };\n\n const nameRef = useRef<HTMLDivElement \| null>(null);\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n useLayoutEffect(() => {\n checkIfOverflowing();\n\n window.addEventListener('resize', checkIfOverflowing);\n return () => {\n window.removeEventListener('resize', checkIfOverflowing);\n };\n }, []);\n\n const checkIfOverflowing = () => {\n if (nameRef.current) {\n const isTextOverflowing = nameRef.current.scrollWidth > nameRef.current.clientWidth;\n setIsOverflowing(isTextOverflowing);\n }\n };\n\n / eslint-disable jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions /\n return (\n <li data-test-id=\"node\" ref={drag} style={{ opacity }}>\n {isFirst && (\n <DropZone\n data={{\n targetItem: node,\n position: DropZonePosition.Before,\n }}\n onDrop={onDrop}\n treeId={treeId}\n />\n )}\n <DropZone\n data={{\n targetItem: node,\n position: DropZonePosition.Within,\n }}\n onDrop={onDrop}\n treeId={treeId}\n >\n <div\n className={merge([\n 'tw-flex tw-py-2 tw-px-2.5 tw-no-underline tw-leading-5 tw-h-10',\n strong && 'tw-font-bold',\n value &&\n !selected &&\n 'tw-text-text hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n selected &&\n 'tw-font-medium tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover hover:tw-text-box-selected-strong-inverse-hover',\n ])}\n onMouseEnter={setHoveredTrue}\n onMouseLeave={setHoveredFalse}\n >\n <a\n data-test-id=\"node-link\"\n className={merge([\n 'tw-flex tw-items-center tw-flex-grow tw-justify-between tw-cursor-pointer tw-h-6',\n parentIds.length === 1 && 'tw-pl-4',\n parentIds.length > 1 && 'tw-pl-8',\n ])}\n aria-selected={selected}\n onClick={onNodeClick}\n >\n <div className=\"tw-flex tw-flex-1 tw-space-x-1 tw-items-center tw-h-full\">\n <span\n data-test-id=\"toggle\"\n className=\"tw-w-2 tw-h-3 tw-flex tw-items-center tw-justify-center\"\n onClick={toggleNodesVisibility}\n >\n {nodes && (\n <div\n className={merge([\n 'tw-transition-transform tw-w-0 tw-h-0 tw-text-black-100 tw-text-opacity-40 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',\n showNodes ? 'tw-rotate-90' : '',\n selected && 'tw-text-box-selected-strong-inverse',\n ])}\n ></div>\n )}\n </span>\n {icon && <span className=\"tw-flex tw-justify-center tw-items-center tw-w-5\">{icon}</span>}\n {editable && onEditableSave ? (\n <div\n ref={nameRef}\n className=\"tw-relative tw-top-[0.2rem] tw-w-full tw-flex-1 tw-h-full\"\n >\n <EditableText\n options={{\n additionalValues: node.id,\n enableDoubleClick: true,\n isSlimInputField: true,\n removeBoxPadding: true,\n }}\n onAdditionalValueSave={onEditableSave}\n isOverflowing={true}\n >\n <span\n title={isOverflowing ? name : ''}\n className=\"tw-max-w-full tw-absolute tw-top-[-0.08rem] tw-truncate\"\n >\n {name}\n </span>\n </EditableText>\n </div>\n ) : (\n <span\n className=\"tw-flex tw-items-center tw-flex-1 tw-relative tw-h-10\"\n title={isOverflowing ? name : ''}\n data-test-id=\"node-link-name\"\n >\n <span ref={nameRef} className=\"tw-truncate tw-max-w-full tw-absolute\">\n {name}\n </span>\n </span>\n )}\n <span>{badge && insertBadge()}</span>\n </div>\n <div className=\"tw-px-1.5\">\n <span\n data-test-id=\"node-label\"\n className={merge([\n 'tw-text-black-100 tw-text-opacity-40 tw-text-xs tw-font-normal',\n selected && 'tw-text-box-selected-strong-inverse',\n ])}\n >\n {label}\n </span>\n </div>\n </a>\n\n {actions && (\n <div\n className={merge([\n 'tw-flex tw-items-center',\n isHovered \|\| selected ? 'tw-visible tw-space-x-1.5' : 'tw-invisible tw-w-0',\n ])}\n >\n {actions.map((action) => action)}\n </div>\n )}\n </div>\n </DropZone>\n\n {nodes && showNodes && (\n <ul\n className=\"tw-p-0 tw-m-0 tw-font-sans tw-font-normal tw-list-none tw-text-left\"\n data-test-id=\"sub-tree\"\n >\n {renderNodeArray({\n nodes,\n treeId,\n activeIds,\n onClick,\n onDrop,\n onEditableSave,\n parentIds: [...parentIds, id],\n })}\n </ul>\n )}\n <DropZone\n data={{\n targetItem: node,\n position: DropZonePosition.After,\n }}\n onDrop={onDrop}\n treeId={treeId}\n />\n </li>\n );\n / eslint-enable jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
1	+ {"version":3,"file":"Node.es.js","sources":["../../../src/components/Tree/Node.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport React, { ReactElement, useLayoutEffect, useRef, useState } from 'react';\nimport { merge } from '@utilities/merge';\nimport { useDrag } from 'react-dnd';\nimport { DropZone, OnDropCallback } from '@components/DropZone';\nimport { TreeFlatListItem } from '@components/Tree';\nimport { DraggableItem, DropZonePosition } from '@utilities/dnd';\nimport { EditableText } from '../EditableText';\nimport { Tooltip, TooltipPosition } from '../Tooltip';\n\nexport type RenderNodeArrayData = Omit<NodeProps, 'isFirst' \| 'strong' \| 'node'> & {\n nodes: DraggableItem<TreeNodeItem>[];\n};\n\nexport const renderNodeArray = ({\n nodes,\n activeIds,\n treeId,\n onClick,\n onDrop,\n onEditableSave,\n onNodeExpand,\n forceCaret,\n parentIds,\n}: RenderNodeArrayData) =>\n nodes.map((node, i) => (\n <Node\n key={node.id}\n node={node}\n nodeIndex={i}\n activeIds={activeIds}\n onClick={onClick}\n isFirst={i === 0}\n onDrop={onDrop}\n onEditableSave={onEditableSave}\n onNodeExpand={onNodeExpand}\n forceCaret={forceCaret}\n parentIds={parentIds}\n treeId={treeId}\n />\n ));\n\nexport interface TreeNodeItem extends TreeFlatListItem {\n nodes?: DraggableItem<TreeNodeItem>[];\n}\n\ntype NodeProps = {\n node: DraggableItem<TreeNodeItem>;\n strong?: boolean;\n nodeIndex?: number;\n activeIds?: NullableString[];\n parentIds?: string[];\n onClick: (id: NullableString) => void;\n isFirst: boolean;\n treeId: string;\n onDrop?: OnDropCallback<TreeNodeItem>;\n onEditableSave?: (targetItemId: string, value: string) => void;\n forceCaret?: boolean;\n onNodeExpand?: (itemId: string) => void;\n};\n\nconst getInitialShowNodesValue = (\n currentNode: DraggableItem<TreeNodeItem>,\n activeNodeIds?: NullableString[],\n): boolean => {\n const hasActiveChildNodes = (node: DraggableItem<TreeNodeItem>, activeIds?: NullableString[]): boolean => {\n if (node.nodes && activeIds) {\n for (const childNode of node.nodes) {\n if (activeIds.includes(childNode.id) \|\| hasActiveChildNodes(childNode, activeIds)) {\n return true;\n }\n }\n }\n return false;\n };\n\n return hasActiveChildNodes(currentNode, activeNodeIds);\n};\n\nexport const Node = ({\n node,\n strong = false,\n activeIds,\n onClick,\n parentIds = [],\n isFirst,\n onDrop,\n onEditableSave,\n onNodeExpand,\n treeId,\n}: NodeProps): ReactElement<NodeProps> => {\n const { id, value, name, label, icon, nodes, actions, editable, badge, tooltipContent, forceCaret } = node;\n const [{ opacity }, drag] = useDrag({\n item: { id, value, name, label, icon, nodes, actions, editable, badge },\n collect: (monitor) => ({\n opacity: monitor.isDragging() ? 0.4 : 1,\n }),\n type: treeId,\n canDrag: onDrop !== undefined,\n });\n const [showNodes, setShowNodes] = useState(getInitialShowNodesValue(node, activeIds));\n const [isHovered, setIsHovered] = useState(false);\n const selected = activeIds && activeIds.length > 0 && activeIds.includes(id);\n\n const setHoveredTrue = () => setIsHovered(true);\n const setHoveredFalse = () => setIsHovered(false);\n const onNodeClick = () => {\n if (!value) {\n setShowNodes(!showNodes);\n return;\n }\n\n if (onClick) {\n onClick(id);\n }\n };\n\n const [hasBeenExpanded, setHasBeenExpanded] = useState<boolean>(false);\n const toggleNodesVisibility = (event: React.MouseEvent) => {\n if (!hasBeenExpanded) {\n onNodeExpand?.(id);\n }\n setHasBeenExpanded(true);\n\n event.stopPropagation();\n setShowNodes(!showNodes);\n };\n\n const insertBadge = () => {\n return (\n <Tooltip\n disabled={!tooltipContent}\n content={tooltipContent}\n position={TooltipPosition.Right}\n withArrow\n triggerElement={\n <div\n data-test-id=\"node-badge\"\n className={merge([\n 'tw-flex tw-justify-center tw-items-center tw-ml-2 tw-text-text-weak',\n badge?.props.size && 'tw-w-8 tw-h-5 tw-bg-box-neutral tw-rounded-full',\n ])}\n >\n {badge}\n </div>\n }\n />\n );\n };\n\n const nameRef = useRef<HTMLDivElement \| null>(null);\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n useLayoutEffect(() => {\n checkIfOverflowing();\n\n window.addEventListener('resize', checkIfOverflowing);\n return () => {\n window.removeEventListener('resize', checkIfOverflowing);\n };\n }, []);\n\n const checkIfOverflowing = () => {\n if (nameRef.current) {\n const isTextOverflowing = nameRef.current.scrollWidth > nameRef.current.clientWidth;\n setIsOverflowing(isTextOverflowing);\n }\n };\n\n / eslint-disable jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions /\n return (\n <li data-test-id=\"node\" ref={drag} style={{ opacity }}>\n {isFirst && (\n <DropZone\n data={{\n targetItem: node,\n position: DropZonePosition.Before,\n }}\n onDrop={onDrop}\n treeId={treeId}\n />\n )}\n <DropZone\n data={{\n targetItem: node,\n position: DropZonePosition.Within,\n }}\n onDrop={onDrop}\n treeId={treeId}\n >\n <div\n className={merge([\n 'tw-flex tw-py-2 tw-px-2.5 tw-no-underline tw-leading-5 tw-h-10',\n strong && 'tw-font-bold',\n value &&\n !selected &&\n 'tw-text-text hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n selected &&\n 'tw-font-medium tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover hover:tw-text-box-selected-strong-inverse-hover',\n ])}\n onMouseEnter={setHoveredTrue}\n onMouseLeave={setHoveredFalse}\n >\n <a\n data-test-id=\"node-link\"\n className={merge([\n 'tw-flex tw-items-center tw-flex-grow tw-justify-between tw-cursor-pointer tw-h-6',\n parentIds.length === 1 && 'tw-pl-4',\n parentIds.length > 1 && 'tw-pl-8',\n ])}\n aria-selected={selected}\n onClick={onNodeClick}\n >\n <div className=\"tw-flex tw-flex-1 tw-space-x-1 tw-items-center tw-h-full\">\n <span\n data-test-id=\"toggle\"\n className=\"tw-w-2 tw-h-3 tw-flex tw-items-center tw-justify-center\"\n onClick={toggleNodesVisibility}\n >\n {(nodes \|\| forceCaret) && (\n <div\n className={merge([\n 'tw-transition-transform tw-w-0 tw-h-0 tw-text-black-100 tw-text-opacity-40 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',\n showNodes ? 'tw-rotate-90' : '',\n selected && 'tw-text-box-selected-strong-inverse',\n ])}\n />\n )}\n </span>\n {icon && <span className=\"tw-flex tw-justify-center tw-items-center tw-w-5\">{icon}</span>}\n {editable && onEditableSave ? (\n <div\n ref={nameRef}\n className=\"tw-relative tw-top-[0.2rem] tw-w-full tw-flex-1 tw-h-full\"\n >\n <EditableText\n options={{\n additionalValues: node.id,\n enableDoubleClick: true,\n isSlimInputField: true,\n removeBoxPadding: true,\n }}\n onAdditionalValueSave={onEditableSave}\n isOverflowing={true}\n >\n <span\n title={isOverflowing ? name : ''}\n className=\"tw-max-w-full tw-absolute tw-top-[-0.08rem] tw-truncate\"\n >\n {name}\n </span>\n </EditableText>\n </div>\n ) : (\n <span\n className=\"tw-flex tw-items-center tw-flex-1 tw-relative tw-h-10\"\n title={isOverflowing ? name : ''}\n data-test-id=\"node-link-name\"\n >\n <span ref={nameRef} className=\"tw-truncate tw-max-w-full tw-absolute\">\n {name}\n </span>\n </span>\n )}\n <span>{badge && insertBadge()}</span>\n </div>\n <div className=\"tw-px-1.5\">\n <span\n data-test-id=\"node-label\"\n className={merge([\n 'tw-text-black-100 tw-text-opacity-40 tw-text-xs tw-font-normal',\n selected && 'tw-text-box-selected-strong-inverse',\n ])}\n >\n {label}\n </span>\n </div>\n </a>\n\n {actions && (\n <div\n className={merge([\n 'tw-flex tw-items-center',\n isHovered \|\| selected ? 'tw-visible tw-space-x-1.5' : 'tw-invisible tw-w-0',\n ])}\n >\n {actions.map((action) => action)}\n </div>\n )}\n </div>\n </DropZone>\n\n {nodes && showNodes && (\n <ul\n className=\"tw-p-0 tw-m-0 tw-font-sans tw-font-normal tw-list-none tw-text-left\"\n data-test-id=\"sub-tree\"\n >\n {renderNodeArray({\n nodes,\n treeId,\n activeIds,\n onClick,\n onDrop,\n onEditableSave,\n onNodeExpand,\n parentIds: [...parentIds, id],\n })}\n </ul>\n )}\n <DropZone\n data={{\n targetItem: node,\n position: DropZonePosition.After,\n }}\n onDrop={onDrop}\n treeId={treeId}\n />\n </li>\n );\n / eslint-enable jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeO,MAAM,IAAkB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAEA,EAAM,IAAI,CAAC,GAAM,MACZ,kBAAA,cAAA,GAAA;AAAA,EACG,KAAK,EAAK;AAAA,EACV;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,SAAS,MAAM;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,CACJ,CACH,GAqBC,IAA2B,CAC7B,GACA,MACU;AACJ,QAAA,IAAsB,CAAC,GAAmC,MAA0C;AAClG,QAAA,EAAK,SAAS;AACH,iBAAA,KAAa,EAAK;AACrB,YAAA,EAAU,SAAS,EAAU,EAAE,KAAK,EAAoB,GAAW,CAAS;AACrE,iBAAA;AAAA;AAIZ,WAAA;AAAA,EAAA;AAGJ,SAAA,EAAoB,GAAa,CAAa;AACzD,GAEa,IAAO,CAAC;AAAA,EACjB;AAAA,EACA,YAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,eAAY,CAAC;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACsC;AAChC,QAAA,EAAE,OAAI,UAAO,SAAM,UAAO,SAAM,UAAO,YAAS,aAAU,UAAO,mBAAgB,kBAAe,GAChG,CAAC,EAAE,cAAW,KAAQ,EAAQ;AAAA,IAChC,MAAM,EAAE,OAAI,UAAO,SAAM,UAAO,SAAM,UAAO,YAAS,aAAU,SAAM;AAAA,IACtE,SAAS,CAAC,MAAa;AAAA,MACnB,SAAS,EAAQ,WAAW,IAAI,MAAM;AAAA,IAAA;AAAA,IAE1C,MAAM;AAAA,IACN,SAAS,MAAW;AAAA,EAAA,CACvB,GACK,CAAC,GAAW,KAAgB,EAAS,EAAyB,GAAM,CAAS,CAAC,GAC9E,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,IAAW,KAAa,EAAU,SAAS,KAAK,EAAU,SAAS,CAAE,GAErE,IAAiB,MAAM,EAAa,EAAI,GACxC,IAAkB,MAAM,EAAa,EAAK,GAC1C,IAAc,MAAM;AACtB,QAAI,CAAC,GAAO;AACR,QAAa,CAAC,CAAS;AACvB;AAAA,IACJ;AAEA,IAAI,KACA,EAAQ,CAAE;AAAA,EACd,GAGE,CAAC,GAAiB,KAAsB,EAAkB,EAAK,GAC/D,IAAwB,CAAC,MAA4B;AACvD,IAAK,KACD,eAAe,IAEnB,EAAmB,EAAI,GAEvB,EAAM,gBAAgB,GACtB,EAAa,CAAC,CAAS;AAAA,EAAA,GAGrB,IAAc,MAEX,kBAAA,cAAA,GAAA;AAAA,IACG,UAAU,CAAC;AAAA,IACX,SAAS;AAAA,IACT,UAAU,EAAgB;AAAA,IAC1B,WAAS;AAAA,IACT,gBACK,kBAAA,cAAA,OAAA;AAAA,MACG,gBAAa;AAAA,MACb,WAAW,EAAM;AAAA,QACb;AAAA,QACA,wBAAO,MAAM,SAAQ;AAAA,MAAA,CACxB;AAAA,IAAA,GAEA,CACL;AAAA,EAAA,CAER,GAIF,IAAU,EAA8B,IAAI,GAC5C,CAAC,GAAe,KAAoB,EAAS,EAAK;AAExD,IAAgB,MACO,MAEZ,OAAA,iBAAiB,UAAU,CAAkB,GAC7C,MAAM;AACF,WAAA,oBAAoB,UAAU,CAAkB;AAAA,EAAA,IAE5D,CAAE,CAAA;AAEL,QAAM,IAAqB,MAAM;AAC7B,QAAI,EAAQ,SAAS;AACjB,YAAM,IAAoB,EAAQ,QAAQ,cAAc,EAAQ,QAAQ;AACxE,QAAiB,CAAiB;AAAA,IACtC;AAAA,EAAA;AAIJ,SACK,kBAAA,cAAA,MAAA;AAAA,IAAG,gBAAa;AAAA,IAAO,KAAK;AAAA,IAAM,OAAO,EAAE,WAAQ;AAAA,EAAA,GAC/C,KACI,kBAAA,cAAA,GAAA;AAAA,IACG,MAAM;AAAA,MACF,YAAY;AAAA,MACZ,UAAU,EAAiB;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACJ,GAEH,kBAAA,cAAA,GAAA;AAAA,IACG,MAAM;AAAA,MACF,YAAY;AAAA,MACZ,UAAU,EAAiB;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEC,kBAAA,cAAA,OAAA;AAAA,IACG,WAAW,EAAM;AAAA,MACb;AAAA,MACA,KAAU;AAAA,MACV,KACI,CAAC,KACD;AAAA,MACJ,KACI;AAAA,IAAA,CACP;AAAA,IACD,cAAc;AAAA,IACd,cAAc;AAAA,EAAA,GAEb,kBAAA,cAAA,KAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAW,EAAM;AAAA,MACb;AAAA,MACA,EAAU,WAAW,KAAK;AAAA,MAC1B,EAAU,SAAS,KAAK;AAAA,IAAA,CAC3B;AAAA,IACD,iBAAe;AAAA,IACf,SAAS;AAAA,EAAA,GAER,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GACV,kBAAA,cAAA,QAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAU;AAAA,IACV,SAAS;AAAA,EAEP,GAAA,MAAS,MACN,kBAAA,cAAA,OAAA;AAAA,IACG,WAAW,EAAM;AAAA,MACb;AAAA,MACA,IAAY,iBAAiB;AAAA,MAC7B,KAAY;AAAA,IAAA,CACf;AAAA,EACL,CAAA,CAER,GACC,KAAS,kBAAA,cAAA,QAAA;AAAA,IAAK,WAAU;AAAA,EAAA,GAAoD,CAAK,GACjF,KAAY,IACR,kBAAA,cAAA,OAAA;AAAA,IACG,KAAK;AAAA,IACL,WAAU;AAAA,EAAA,GAET,kBAAA,cAAA,GAAA;AAAA,IACG,SAAS;AAAA,MACL,kBAAkB,EAAK;AAAA,MACvB,mBAAmB;AAAA,MACnB,kBAAkB;AAAA,MAClB,kBAAkB;AAAA,IACtB;AAAA,IACA,uBAAuB;AAAA,IACvB,eAAe;AAAA,EAAA,GAEd,kBAAA,cAAA,QAAA;AAAA,IACG,OAAO,IAAgB,IAAO;AAAA,IAC9B,WAAU;AAAA,EAAA,GAET,CACL,CACJ,CACJ,IAEC,kBAAA,cAAA,QAAA;AAAA,IACG,WAAU;AAAA,IACV,OAAO,IAAgB,IAAO;AAAA,IAC9B,gBAAa;AAAA,EAAA,GAEZ,kBAAA,cAAA,QAAA;AAAA,IAAK,KAAK;AAAA,IAAS,WAAU;AAAA,EACzB,GAAA,CACL,CACJ,GAEH,kBAAA,cAAA,QAAA,MAAM,KAAS,EAAY,CAAE,CAClC,GACC,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GACV,kBAAA,cAAA,QAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAW,EAAM;AAAA,MACb;AAAA,MACA,KAAY;AAAA,IAAA,CACf;AAAA,EAAA,GAEA,CACL,CACJ,CACJ,GAEC,KACI,kBAAA,cAAA,OAAA;AAAA,IACG,WAAW,EAAM;AAAA,MACb;AAAA,MACA,KAAa,IAAW,8BAA8B;AAAA,IAAA,CACzD;AAAA,EAEA,GAAA,EAAQ,IAAI,CAAC,MAAW,CAAM,CACnC,CAER,CACJ,GAEC,KAAS,KACL,kBAAA,cAAA,MAAA;AAAA,IACG,WAAU;AAAA,IACV,gBAAa;AAAA,EAAA,GAEZ,EAAgB;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,CAAC,GAAG,GAAW,CAAE;AAAA,EAC/B,CAAA,CACL,GAEH,kBAAA,cAAA,GAAA;AAAA,IACG,MAAM;AAAA,MACF,YAAY;AAAA,MACZ,UAAU,EAAiB;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,EACJ,CAAA,CACJ;AAGR;"}

package/dist/components/Tree/Tree.d.ts CHANGED Viewed

@@ -12,6 +12,7 @@ export interface TreeFlatListItem {
     tooltipContent?: ReactNode;
     parentId: NullableString;
     editable?: boolean;
+    forceCaret?: boolean;
 }
 export declare type TreeProps = {
     nodes: DraggableItem<TreeFlatListItem>[];
@@ -19,5 +20,6 @@ export declare type TreeProps = {
     activeNodeIds: NullableString[];
     onDragAndDrop?: (itemId: string, parentId: NullableString, positionBeforeId: NullableString) => void;
     onEditableSave?: (targetItemId: string, value: string) => void;
+    onNodeExpand?: (itemId: string) => void;
 };
 export declare const Tree: FC<TreeProps>;

package/dist/components/Tree/Tree.es.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import y, { useState as l, useEffect as k } from "react";
-import { renderNodeArray as C } from "./Node.es.js";
-import { useId as W } from "@react-aria/utils";
-import { DndWrapper as b } from "../../utilities/dnd/DndWrapper.es.js";
-import { draggableItemCompareFn as A } from "../../utilities/dnd/draggableItemCompareFn.es.js";
+import E, { useState as l, useEffect as N } from "react";
+import { renderNodeArray as b } from "./Node.es.js";
+import { useId as A } from "@react-aria/utils";
+import { DndWrapper as D } from "../../utilities/dnd/DndWrapper.es.js";
+import { draggableItemCompareFn as H } from "../../utilities/dnd/draggableItemCompareFn.es.js";
 import { DropZonePosition as p } from "../../utilities/dnd/types.es.js";
 import "@react-aria/aria-modal-polyfill";
 import "@react-aria/button";
@@ -1682,65 +1682,69 @@ import "@react-aria/menu";
 import "@react-stately/collections";
 import "@react-stately/tree";
 import "./utils/mocks.es.js";
-import { listToTree as D } from "./utils/listToTree.es.js";
-const VB = ({
+import { listToTree as P } from "./utils/listToTree.es.js";
+const YB = ({
   nodes: e,
   onSelect: c,
-  activeNodeIds: E,
+  activeNodeIds: k,
   onDragAndDrop: a,
-  onEditableSave: f
+  onEditableSave: f,
+  onNodeExpand: w
 }) => {
-  const [N, n] = l(!1), [r, w] = l(E), [h, T] = l([]), s = W();
-  k(() => {
-    const t = D(e);
+  const [h, n] = l(!1), [r, u] = l(k), [x, T] = l([]), s = A();
+  N(() => {
+    const t = P(e);
     T(t);
   }, [e]);
-  const x = (t) => {
-    if (N) {
+  const L = (t) => {
+    if (h) {
       const o = r.includes(t) ? [...r].filter((i) => i !== t) : [...r, t];
-      w(o), c(o);
+      u(o), c(o);
     } else
-      w([t]), c([t]);
-  }, L = a ? (t, o, i) => {
-    const K = () => {
+      u([t]), c([t]);
+  }, M = a ? (t, o, i) => {
+    const B = () => {
       switch (i) {
         case p.After:
           const m = e.filter((d) => d.parentId === t.parentId);
-          m.sort(A);
-          const v = m.findIndex((d) => d.id === t.id);
-          return v === m.length - 1 ? null : m[v + 1].id;
+          m.sort(H);
+          const y = m.findIndex((d) => d.id === t.id);
+          return y === m.length - 1 ? null : m[y + 1].id;
         case p.Before:
           return t.id;
         case p.Within:
           return null;
       }
-    }, S = i === p.Within ? t.id : t.parentId, B = K();
-    a(o.id, S, B);
-  } : void 0, M = f ? (t, o) => {
+    }, C = i === p.Within ? t.id : t.parentId, W = B();
+    a(o.id, C, W);
+  } : void 0, K = f ? (t, o) => {
     f(t, o);
-  } : void 0, u = (t) => {
+  } : void 0, S = w ? (t) => {
+    w(t);
+  } : void 0, v = (t) => {
     t.key === "Meta" || t.ctrlKey ? n(!0) : n(!1);
   }, I = (t) => {
     (t.key === "Meta" || t.ctrlKey) && n(!1);
   };
-  return k(() => (window.addEventListener("keydown", u), window.addEventListener("keyup", I), () => {
-    window.removeEventListener("keydown", u), window.removeEventListener("keyup", I);
-  }), []), /* @__PURE__ */ y.createElement("ul", {
+  return N(() => (window.addEventListener("keydown", v), window.addEventListener("keyup", I), () => {
+    window.removeEventListener("keydown", v), window.removeEventListener("keyup", I);
+  }), []), /* @__PURE__ */ E.createElement("ul", {
     id: s,
     "data-test-id": "tree",
     className: "tw-p-0 tw-m-0 tw-font-sans tw-font-normal tw-list-none tw-text-left tw-text-sm tw-select-none"
-  }, /* @__PURE__ */ y.createElement(b, {
+  }, /* @__PURE__ */ E.createElement(D, {
     id: s
-  }, C({
-    nodes: h,
+  }, b({
+    nodes: x,
     treeId: s,
     activeIds: r,
-    onClick: x,
-    onDrop: L,
-    onEditableSave: M
+    onClick: L,
+    onDrop: M,
+    onEditableSave: K,
+    onNodeExpand: S
   })));
 };
 export {
-  VB as Tree
+  YB as Tree
 };
 //# sourceMappingURL=Tree.es.js.map

package/dist/components/Tree/Tree.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tree.es.js","sources":["../../../src/components/Tree/Tree.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC, ReactElement, ReactNode, useEffect, useState } from 'react';\nimport { renderNodeArray } from './Node';\nimport { useId } from '@react-aria/utils';\nimport { DndWrapper, DraggableItem, DropZonePosition, draggableItemCompareFn } from '@utilities/dnd';\nimport { listToTree } from '@components/Tree/utils';\nimport { IconProps } from '@foundation/Icon';\nimport { BadgeProps } from '..';\n\nexport interface TreeFlatListItem {\n name: string;\n icon?: ReactElement<IconProps>;\n label?: string;\n value?: string;\n actions?: React.ReactNode[];\n badge?: ReactElement<IconProps> \| ReactElement<BadgeProps>;\n tooltipContent?: ReactNode;\n parentId: NullableString;\n editable?: boolean;\n}\n\nexport type TreeProps = {\n nodes: DraggableItem<TreeFlatListItem>[];\n onSelect: (ids: NullableString[]) => void;\n activeNodeIds: NullableString[];\n onDragAndDrop?: (itemId: string, parentId: NullableString, positionBeforeId: NullableString) => void;\n onEditableSave?: (targetItemId: string, value: string) => void;\n};\n\nexport const Tree: FC<TreeProps> = ({\n nodes,\n onSelect,\n activeNodeIds: initialActiveNodeIds,\n onDragAndDrop,\n onEditableSave,\n}) => {\n const [multiSelectMode, setMultiSelectMode] = useState<boolean>(false);\n const [activeIds, setActiveIds] = useState<NullableString[]>(initialActiveNodeIds);\n const [treeNodes, setTreeNodes] = useState<DraggableItem<TreeFlatListItem>[]>([]);\n const treeId = useId();\n\n useEffect(() => {\n const listToTreeNodes = listToTree(nodes);\n setTreeNodes(listToTreeNodes);\n }, [nodes]);\n\n const onNodeClick = (id: NullableString) => {\n if (multiSelectMode) {\n const modifiedSelectedIds: NullableString[] = activeIds.includes(id)\n ? [...activeIds].filter((i) => i !== id)\n : [...activeIds, id];\n\n setActiveIds(modifiedSelectedIds);\n onSelect(modifiedSelectedIds);\n } else {\n setActiveIds([id]);\n onSelect([id]);\n }\n };\n\n const handleDrop = onDragAndDrop\n ? (\n targetItem: DraggableItem<TreeFlatListItem>,\n sourceItem: DraggableItem<TreeFlatListItem>,\n position: DropZonePosition,\n ) => {\n const getPositionBeforeId = () => {\n switch (position) {\n case DropZonePosition.After:\n const sameLevelNodes = nodes.filter((node) => node.parentId === targetItem.parentId);\n sameLevelNodes.sort(draggableItemCompareFn);\n const targetItemIndex = sameLevelNodes.findIndex((item) => item.id === targetItem.id);\n if (targetItemIndex === sameLevelNodes.length - 1) {\n return null;\n } else {\n return sameLevelNodes[targetItemIndex + 1].id;\n }\n case DropZonePosition.Before:\n return targetItem.id;\n case DropZonePosition.Within:\n return null;\n }\n };\n\n const parentId = position === DropZonePosition.Within ? targetItem.id : targetItem.parentId;\n const positionBeforeId = getPositionBeforeId();\n onDragAndDrop(sourceItem.id, parentId, positionBeforeId);\n }\n : undefined;\n\n const handleEditableSave = onEditableSave\n ? (targetItemId: string, value: string) => {\n onEditableSave(targetItemId, value);\n }\n : undefined;\n\n const downKeyHandler = (event: KeyboardEvent) => {\n if (event.key === 'Meta' \|\| event.ctrlKey) {\n setMultiSelectMode(true);\n } else {\n setMultiSelectMode(false);\n }\n };\n\n const upKeyHandler = (event: KeyboardEvent) => {\n if (event.key === 'Meta' \|\| event.ctrlKey) {\n setMultiSelectMode(false);\n }\n };\n\n useEffect(() => {\n window.addEventListener('keydown', downKeyHandler);\n window.addEventListener('keyup', upKeyHandler);\n\n return () => {\n window.removeEventListener('keydown', downKeyHandler);\n window.removeEventListener('keyup', upKeyHandler);\n };\n }, []);\n\n return (\n <ul\n id={treeId}\n data-test-id=\"tree\"\n className=\"tw-p-0 tw-m-0 tw-font-sans tw-font-normal tw-list-none tw-text-left tw-text-sm tw-select-none\"\n >\n <DndWrapper id={treeId}>\n {renderNodeArray({\n nodes: treeNodes,\n treeId,\n activeIds,\n onClick: onNodeClick,\n onDrop: handleDrop,\n onEditableSave: handleEditableSave,\n })}\n </DndWrapper>\n </ul>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AA8BO~~,MAAM,KAAsB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,MACE;AACF,QAAM,CAAC,GAAiB,KAAsB,EAAkB,EAAK,GAC/D,CAAC,GAAW,KAAgB,EAA2B,CAAoB,GAC3E,CAAC,GAAW,KAAgB,EAA4C,CAAE,CAAA,GAC1E,IAAS;AAEf,IAAU,MAAM;AACN,UAAA,IAAkB,EAAW,CAAK;AACxC,MAAa,CAAe;AAAA,EAAA,GAC7B,CAAC,CAAK,CAAC;AAEJ,QAAA,IAAc,CAAC,MAAuB;AACxC,QAAI,GAAiB;AACjB,YAAM,IAAwC,EAAU,SAAS,CAAE,IAC7D,CAAC,GAAG,CAAS,EAAE,OAAO,CAAC,MAAM,MAAM,CAAE,IACrC,CAAC,GAAG,GAAW,CAAE;AAEvB,QAAa,CAAmB,GAChC,EAAS,CAAmB;AAAA,IAAA;AAEf,QAAA,CAAC,CAAE,CAAC,GACR,EAAA,CAAC,CAAE,CAAC;AAAA,EACjB,GAGE,IAAa,IACb,CACI,GACA,GACA,MACC;AACD,UAAM,IAAsB,MAAM;AACtB,cAAA;AAAA,aACC,EAAiB;AACZ,gBAAA,IAAiB,EAAM,OAAO,CAAC,MAAS,EAAK,aAAa,EAAW,QAAQ;AACnF,YAAe,KAAK,CAAsB;AACpC,gBAAA,IAAkB,EAAe,UAAU,CAAC,MAAS,EAAK,OAAO,EAAW,EAAE;AAChF,iBAAA,MAAoB,EAAe,SAAS,IACrC,OAEA,EAAe,IAAkB,GAAG;AAAA,aAE9C,EAAiB;AAClB,iBAAO,EAAW;AAAA,aACjB,EAAiB;AACX,iBAAA;AAAA;AAAA,IAAA,GAIb,IAAW,MAAa,EAAiB,SAAS,EAAW,KAAK,EAAW,UAC7E,IAAmB;AACX,MAAA,EAAW,IAAI,GAAU,CAAgB;AAAA,EAE3D,IAAA,QAEA,IAAqB,IACrB,CAAC,GAAsB,MAAkB;AACrC,MAAe,GAAc,CAAK;AAAA,EAEtC,IAAA,QAEA,IAAiB,CAAC,MAAyB;AAC7C,IAAI,EAAM,QAAQ,UAAU,EAAM,UAC9B,EAAmB,EAAI,IAEvB,EAAmB,EAAK;AAAA,EAC5B,GAGE,IAAe,CAAC,MAAyB;AAC3C,IAAI,GAAM,QAAQ,UAAU,EAAM,YAC9B,EAAmB,EAAK;AAAA,EAC5B;AAGJ,WAAU,MACC,QAAA,iBAAiB,WAAW,CAAc,GAC1C,OAAA,iBAAiB,SAAS,CAAY,GAEtC,MAAM;AACF,WAAA,oBAAoB,WAAW,CAAc,GAC7C,OAAA,oBAAoB,SAAS,CAAY;AAAA,EAAA,IAErD,CAAE,CAAA,GAGA,kBAAA,cAAA,MAAA;AAAA,IACG,IAAI;AAAA,IACJ,gBAAa;AAAA,IACb,WAAU;AAAA,EAAA,GAET,kBAAA,cAAA,GAAA;AAAA,IAAW,IAAI;AAAA,EAAA,GACX,EAAgB;AAAA,IACb,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,gBAAgB;AAAA,~~EACnB~~,CAAA,CACL,CACJ;AAER;"}
1	+ {"version":3,"file":"Tree.es.js","sources":["../../../src/components/Tree/Tree.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC, ReactElement, ReactNode, useEffect, useState } from 'react';\nimport { renderNodeArray } from './Node';\nimport { useId } from '@react-aria/utils';\nimport { DndWrapper, DraggableItem, DropZonePosition, draggableItemCompareFn } from '@utilities/dnd';\nimport { listToTree } from '@components/Tree/utils';\nimport { IconProps } from '@foundation/Icon';\nimport { BadgeProps } from '..';\n\nexport interface TreeFlatListItem {\n name: string;\n icon?: ReactElement<IconProps>;\n label?: string;\n value?: string;\n actions?: React.ReactNode[];\n badge?: ReactElement<IconProps> \| ReactElement<BadgeProps>;\n tooltipContent?: ReactNode;\n parentId: NullableString;\n editable?: boolean;\n forceCaret?: boolean;\n}\n\nexport type TreeProps = {\n nodes: DraggableItem<TreeFlatListItem>[];\n onSelect: (ids: NullableString[]) => void;\n activeNodeIds: NullableString[];\n onDragAndDrop?: (itemId: string, parentId: NullableString, positionBeforeId: NullableString) => void;\n onEditableSave?: (targetItemId: string, value: string) => void;\n onNodeExpand?: (itemId: string) => void;\n};\n\nexport const Tree: FC<TreeProps> = ({\n nodes,\n onSelect,\n activeNodeIds: initialActiveNodeIds,\n onDragAndDrop,\n onEditableSave,\n onNodeExpand,\n}) => {\n const [multiSelectMode, setMultiSelectMode] = useState<boolean>(false);\n const [activeIds, setActiveIds] = useState<NullableString[]>(initialActiveNodeIds);\n const [treeNodes, setTreeNodes] = useState<DraggableItem<TreeFlatListItem>[]>([]);\n const treeId = useId();\n\n useEffect(() => {\n const listToTreeNodes = listToTree(nodes);\n setTreeNodes(listToTreeNodes);\n }, [nodes]);\n\n const onNodeClick = (id: NullableString) => {\n if (multiSelectMode) {\n const modifiedSelectedIds: NullableString[] = activeIds.includes(id)\n ? [...activeIds].filter((i) => i !== id)\n : [...activeIds, id];\n\n setActiveIds(modifiedSelectedIds);\n onSelect(modifiedSelectedIds);\n } else {\n setActiveIds([id]);\n onSelect([id]);\n }\n };\n\n const handleDrop = onDragAndDrop\n ? (\n targetItem: DraggableItem<TreeFlatListItem>,\n sourceItem: DraggableItem<TreeFlatListItem>,\n position: DropZonePosition,\n ) => {\n const getPositionBeforeId = () => {\n switch (position) {\n case DropZonePosition.After:\n const sameLevelNodes = nodes.filter((node) => node.parentId === targetItem.parentId);\n sameLevelNodes.sort(draggableItemCompareFn);\n const targetItemIndex = sameLevelNodes.findIndex((item) => item.id === targetItem.id);\n if (targetItemIndex === sameLevelNodes.length - 1) {\n return null;\n } else {\n return sameLevelNodes[targetItemIndex + 1].id;\n }\n case DropZonePosition.Before:\n return targetItem.id;\n case DropZonePosition.Within:\n return null;\n }\n };\n\n const parentId = position === DropZonePosition.Within ? targetItem.id : targetItem.parentId;\n const positionBeforeId = getPositionBeforeId();\n onDragAndDrop(sourceItem.id, parentId, positionBeforeId);\n }\n : undefined;\n\n const handleEditableSave = onEditableSave\n ? (targetItemId: string, value: string) => {\n onEditableSave(targetItemId, value);\n }\n : undefined;\n\n const handleNodeExpand = onNodeExpand\n ? (itemId: string) => {\n onNodeExpand(itemId);\n }\n : undefined;\n\n const downKeyHandler = (event: KeyboardEvent) => {\n if (event.key === 'Meta' \|\| event.ctrlKey) {\n setMultiSelectMode(true);\n } else {\n setMultiSelectMode(false);\n }\n };\n\n const upKeyHandler = (event: KeyboardEvent) => {\n if (event.key === 'Meta' \|\| event.ctrlKey) {\n setMultiSelectMode(false);\n }\n };\n\n useEffect(() => {\n window.addEventListener('keydown', downKeyHandler);\n window.addEventListener('keyup', upKeyHandler);\n\n return () => {\n window.removeEventListener('keydown', downKeyHandler);\n window.removeEventListener('keyup', upKeyHandler);\n };\n }, []);\n\n return (\n <ul\n id={treeId}\n data-test-id=\"tree\"\n className=\"tw-p-0 tw-m-0 tw-font-sans tw-font-normal tw-list-none tw-text-left tw-text-sm tw-select-none\"\n >\n <DndWrapper id={treeId}>\n {renderNodeArray({\n nodes: treeNodes,\n treeId,\n activeIds,\n onClick: onNodeClick,\n onDrop: handleDrop,\n onEditableSave: handleEditableSave,\n onNodeExpand: handleNodeExpand,\n })}\n </DndWrapper>\n </ul>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

package/dist/components/index.d.ts CHANGED Viewed

@@ -21,6 +21,7 @@ export * from './FormControl';
 export * from './FrontifyPattern';
 export * from './InputLabel';
 export * from './LinkChooser';
+export * from './LoadingBar';
 export * from './LoadingCircle';
 export * from './MenuItem';
 export * from './Modal';
@@ -42,3 +43,4 @@ export * from './TooltipIcon';
 export * from './Tree';
 export * from './Trigger';
 export * from './EditableText';
+export * from './OverflowMenu';