@frontify/fondue 12.0.0-beta.4 → 12.0.0-beta.5

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

@@ -1,157 +1,168 @@
-import e, { useState as A } from "react";
-import { merge as i } from "../../utilities/merge.es.js";
+import e, { useState as H } from "react";
+import { merge as m } from "../../utilities/merge.es.js";
 import { useDrag as T } from "react-dnd";
 import { DropZone as N } from "../DropZone/DropZone.es.js";
 import "../../utilities/dnd/DndWrapper.es.js";
-import { DropZonePosition as h } from "../../utilities/dnd/types.es.js";
+import { DropZonePosition as E } from "../../utilities/dnd/types.es.js";
 import { EditableText as Z } from "../EditableText/EditableText.es.js";
 const z = ({
-  nodes: r,
-  activeIds: p,
-  treeId: n,
-  onClick: w,
-  onDrop: c,
-  onEditableSave: g,
-  parentIds: s
-}) => r.map((o, t) => /* @__PURE__ */ e.createElement(L, {
-  key: o.id,
-  node: o,
-  nodeIndex: t,
-  activeIds: p,
-  onClick: w,
-  isFirst: t === 0,
-  onDrop: c,
-  onEditableSave: g,
-  parentIds: s,
-  treeId: n
-})), L = ({
-  node: r,
-  strong: p = !1,
-  activeIds: n,
-  onClick: w,
-  parentIds: c = [],
-  isFirst: g,
+  nodes: t,
+  activeIds: d,
+  treeId: r,
+  onClick: n,
   onDrop: s,
-  onEditableSave: o,
-  treeId: t
+  onEditableSave: i,
+  parentIds: a
+}) => t.map((w, o) => /* @__PURE__ */ e.createElement(R, {
+  key: w.id,
+  node: w,
+  nodeIndex: o,
+  activeIds: d,
+  onClick: n,
+  isFirst: o === 0,
+  onDrop: s,
+  onEditableSave: i,
+  parentIds: a,
+  treeId: r
+})), L = (t, d) => {
+  const r = (n, s) => {
+    if (n.nodes && s) {
+      for (const i of n.nodes)
+        if (s.includes(i.id) || r(i, s))
+          return !0;
+    }
+    return !1;
+  };
+  return r(t, d);
+}, R = ({
+  node: t,
+  strong: d = !1,
+  activeIds: r,
+  onClick: n,
+  parentIds: s = [],
+  isFirst: i,
+  onDrop: a,
+  onEditableSave: w,
+  treeId: o
 }) => {
-  const { id: d, value: u, name: b, label: y, icon: v, nodes: x, actions: E, editable: k, badge: a } = r, [{ opacity: B }, P] = T({
-    item: { id: d, value: u, name: b, label: y, icon: v, nodes: x, actions: E, editable: k, badge: a },
-    collect: (m) => ({
-      opacity: m.isDragging() ? 0.4 : 1
+  const { id: f, value: g, name: b, label: y, icon: v, nodes: u, actions: h, editable: k, badge: l } = t, [{ opacity: V }, B] = T({
+    item: { id: f, value: g, name: b, label: y, icon: v, nodes: u, actions: h, editable: k, badge: l },
+    collect: (x) => ({
+      opacity: x.isDragging() ? 0.4 : 1
     }),
-    type: t,
-    canDrag: s !== void 0
-  }), [f, j] = A(!1), [V, F] = A(!1), l = n && n.length > 0 && n.includes(d), C = () => F(!0), D = () => F(!1), M = () => {
-    if (!u) {
-      j(!f);
+    type: o,
+    canDrag: a !== void 0
+  }), [p, j] = H(L(t, r)), [C, A] = H(!1), c = r && r.length > 0 && r.includes(f), P = () => A(!0), S = () => A(!1), D = () => {
+    if (!g) {
+      j(!p);
       return;
     }
-    w && w(d);
-  }, S = (m) => {
-    m.stopPropagation(), j(!f);
-  }, H = () => /* @__PURE__ */ e.createElement("div", {
+    n && n(f);
+  }, M = (x) => {
+    x.stopPropagation(), j(!p);
+  }, F = () => /* @__PURE__ */ e.createElement("div", {
     "data-test-id": "node-badge",
-    className: i([
+    className: m([
       "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"
+      (l == null ? void 0 : l.props.size) && "tw-w-8 tw-h-5 tw-bg-box-neutral tw-rounded-full"
     ])
-  }, a);
+  }, l);
   return /* @__PURE__ */ e.createElement("li", {
     "data-test-id": "node",
-    ref: P,
-    style: { opacity: B }
-  }, g && /* @__PURE__ */ e.createElement(N, {
+    ref: B,
+    style: { opacity: V }
+  }, i && /* @__PURE__ */ e.createElement(N, {
     data: {
-      targetItem: r,
-      position: h.Before
+      targetItem: t,
+      position: E.Before
     },
-    onDrop: s,
-    treeId: t
+    onDrop: a,
+    treeId: o
   }), /* @__PURE__ */ e.createElement(N, {
     data: {
-      targetItem: r,
-      position: h.Within
+      targetItem: t,
+      position: E.Within
     },
-    onDrop: s,
-    treeId: t
+    onDrop: a,
+    treeId: o
   }, /* @__PURE__ */ e.createElement("div", {
-    className: i([
+    className: m([
       "tw-flex tw-py-2 tw-px-2.5 tw-no-underline tw-leading-5",
-      p && "tw-font-bold",
-      u && !l && "tw-text-text hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover",
-      l && "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"
+      d && "tw-font-bold",
+      g && !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: C,
-    onMouseLeave: D
+    onMouseEnter: P,
+    onMouseLeave: S
   }, /* @__PURE__ */ e.createElement("a", {
     "data-test-id": "node-link",
-    className: i([
+    className: m([
       "tw-flex tw-items-center tw-flex-grow tw-justify-between tw-cursor-pointer",
-      c.length === 1 && "tw-pl-4",
-      c.length > 1 && "tw-pl-8"
+      s.length === 1 && "tw-pl-4",
+      s.length > 1 && "tw-pl-8"
     ]),
-    "aria-selected": l,
-    onClick: M
+    "aria-selected": c,
+    onClick: D
   }, /* @__PURE__ */ e.createElement("div", {
     className: "tw-flex tw-space-x-1 tw-items-center"
   }, /* @__PURE__ */ e.createElement("span", {
     "data-test-id": "toggle",
     className: "tw-w-2 tw-h-3 tw-flex tw-items-center tw-justify-center",
-    onClick: S
-  }, x && /* @__PURE__ */ e.createElement("div", {
-    className: i([
+    onClick: M
+  }, u && /* @__PURE__ */ e.createElement("div", {
+    className: m([
       "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",
-      f ? "tw-rotate-90" : "",
-      l && "tw-text-box-selected-strong-inverse"
+      p ? "tw-rotate-90" : "",
+      c && "tw-text-box-selected-strong-inverse"
     ])
   })), v && /* @__PURE__ */ e.createElement("span", {
     className: "tw-flex tw-justify-center tw-items-center tw-w-5"
-  }, v), k && o ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(Z, {
+  }, v), k && w ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(Z, {
     options: {
-      additionalValues: r.id,
+      additionalValues: t.id,
       enableDoubleClick: !0,
       isSlimInputField: !0,
       removeBoxPadding: !0
     },
-    onAdditionalValueSave: o
-  }, /* @__PURE__ */ e.createElement("p", null, b)), a && H()) : /* @__PURE__ */ e.createElement("span", {
+    onAdditionalValueSave: w
+  }, /* @__PURE__ */ e.createElement("p", null, b)), l && F()) : /* @__PURE__ */ e.createElement("span", {
     className: "tw-flex tw-items-center",
     "data-test-id": "node-link-name"
-  }, b, a && H())), /* @__PURE__ */ e.createElement("div", {
+  }, b, l && F())), /* @__PURE__ */ e.createElement("div", {
     className: "tw-px-1.5"
   }, /* @__PURE__ */ e.createElement("span", {
-    className: i([
+    "data-test-id": "node-label",
+    className: m([
       "tw-text-black-100 tw-text-opacity-40 tw-text-xs tw-font-normal",
-      l && "tw-text-box-selected-strong-inverse"
+      c && "tw-text-box-selected-strong-inverse"
     ])
-  }, y))), E && /* @__PURE__ */ e.createElement("div", {
-    className: i([
+  }, y))), h && /* @__PURE__ */ e.createElement("div", {
+    className: m([
       "tw-flex tw-items-center",
-      V || l ? "tw-visible tw-space-x-1.5" : "tw-invisible tw-w-0"
+      C || c ? "tw-visible tw-space-x-1.5" : "tw-invisible tw-w-0"
     ])
-  }, E.map((m) => m)))), x && f && /* @__PURE__ */ e.createElement("ul", {
+  }, h.map((x) => x)))), u && p && /* @__PURE__ */ e.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"
   }, z({
-    nodes: x,
-    treeId: t,
-    activeIds: n,
-    onClick: w,
-    onDrop: s,
-    onEditableSave: o,
-    parentIds: [...c, d]
+    nodes: u,
+    treeId: o,
+    activeIds: r,
+    onClick: n,
+    onDrop: a,
+    onEditableSave: w,
+    parentIds: [...s, f]
   })), /* @__PURE__ */ e.createElement(N, {
     data: {
-      targetItem: r,
-      position: h.After
+      targetItem: t,
+      position: E.After
     },
-    onDrop: s,
-    treeId: t
+    onDrop: a,
+    treeId: o
   }));
 };
 export {
-  L as Node,
+  R as Node,
   z as renderNodeArray
 };
 //# sourceMappingURL=Node.es.js.map

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

@@ -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, 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';\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\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 } = 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(false);\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            <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    /* 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',\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',\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-space-x-1 tw-items-center\">\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                                <>\n                                    <EditableText\n                                        options={{\n                                            additionalValues: node.id,\n                                            enableDoubleClick: true,\n                                            isSlimInputField: true,\n                                            removeBoxPadding: true,\n                                        }}\n                                        onAdditionalValueSave={onEditableSave}\n                                    >\n                                        <p>{name}</p>\n                                    </EditableText>\n                                    {badge && insertBadge()}\n                                </>\n                            ) : (\n                                <span className=\"tw-flex tw-items-center\" data-test-id=\"node-link-name\">\n                                    {name}\n                                    {badge && insertBadge()}\n                                </span>\n                            )}\n                        </div>\n                        <div className=\"tw-px-1.5\">\n                            <span\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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"}
+{"version":3,"file":"Node.es.js","sources":["../../../src/components/Tree/Node.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ReactElement, 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';\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 } = 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            <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    /* 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',\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',\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-space-x-1 tw-items-center\">\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                                <>\n                                    <EditableText\n                                        options={{\n                                            additionalValues: node.id,\n                                            enableDoubleClick: true,\n                                            isSlimInputField: true,\n                                            removeBoxPadding: true,\n                                        }}\n                                        onAdditionalValueSave={onEditableSave}\n                                    >\n                                        <p>{name}</p>\n                                    </EditableText>\n                                    {badge && insertBadge()}\n                                </>\n                            ) : (\n                                <span className=\"tw-flex tw-items-center\" data-test-id=\"node-link-name\">\n                                    {name}\n                                    {badge && insertBadge()}\n                                </span>\n                            )}\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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"}