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

package/dist/components/Button/Button.es.js

@@ -1,69 +1,70 @@
-import B, { forwardRef as x, cloneElement as I } from "react";
-import { merge as s } from "../../utilities/merge.es.js";
-import { useForwardedRef as M } from "../../utilities/useForwardedRef.es.js";
-import { ButtonStyle as o, ButtonEmphasis as u, ButtonType as N, ButtonSize as T, ButtonRounding as z } from "./ButtonTypes.es.js";
-import { ButtonEmphasis as Q, ButtonRounding as X, ButtonSize as Z, ButtonStyle as h, ButtonType as tt, UpdatedButtonStyle as ot } from "./ButtonTypes.es.js";
-import { ButtonCommonClasses as k, ButtonRoundingClasses as F, ButtonSizeClasses as i, IconSpacingClasses as O, ButtonStyleClasses as U, ButtonDisabledClasses as _ } from "./ButtonClasses.es.js";
-import { ButtonCommonClasses as nt, ButtonDisabledClasses as at, ButtonRoundingClasses as st, ButtonSizeClasses as ut, ButtonStyleClasses as rt, IconSpacingClasses as lt } from "./ButtonClasses.es.js";
-import { FOCUS_VISIBLE_STYLE as P } from "../../utilities/focusStyle.es.js";
-import { buttonTypeMap as V, buttonIconSizeMap as W } from "./mappings.es.js";
-const Y = ({
-  type: p = N.Button,
+import f, { forwardRef as M, cloneElement as N } from "react";
+import { useButton as P } from "@react-aria/button";
+import { merge as u } from "../../utilities/merge.es.js";
+import { useForwardedRef as T } from "../../utilities/useForwardedRef.es.js";
+import { ButtonStyle as o, ButtonEmphasis as r, ButtonType as z, ButtonSize as O, ButtonRounding as U } from "./ButtonTypes.es.js";
+import { ButtonEmphasis as nt, ButtonRounding as st, ButtonSize as at, ButtonStyle as ut, ButtonType as rt, UpdatedButtonStyle as mt } from "./ButtonTypes.es.js";
+import { ButtonCommonClasses as V, ButtonRoundingClasses as _, ButtonSizeClasses as c, IconSpacingClasses as k, ButtonStyleClasses as W, ButtonDisabledClasses as Y } from "./ButtonClasses.es.js";
+import { ButtonCommonClasses as it, ButtonDisabledClasses as ft, ButtonRoundingClasses as Bt, ButtonSizeClasses as pt, ButtonStyleClasses as ct, IconSpacingClasses as St } from "./ButtonClasses.es.js";
+import { FOCUS_VISIBLE_STYLE as $ } from "../../utilities/focusStyle.es.js";
+import { buttonTypeMap as j, buttonIconSizeMap as q } from "./mappings.es.js";
+import { useFocusRing as v } from "@react-aria/focus";
+const A = ({
+  type: S = z.Button,
   style: t = o.Default,
-  size: e = T.Medium,
-  rounding: S = z.Medium,
-  emphasis: n = u.Strong,
-  hideLabel: r = !1,
-  disabled: l = !1,
-  icon: m,
+  size: e = O.Medium,
+  rounding: C = U.Medium,
+  emphasis: n = r.Strong,
+  hideLabel: m = !1,
+  disabled: s = !1,
+  icon: l,
   children: a,
-  onClick: c,
-  hugWidth: C = !0,
-  "aria-label": d,
+  onClick: B,
+  hugWidth: d = !0,
+  "aria-label": b,
   formId: g,
   solid: y,
-  inverted: b
-}, E) => {
-  t === o.Primary ? (t = o.Default, n = u.Strong) : t === o.Secondary && (t = o.Default, n = u.Default), y === !1 && (n = u.Weak);
-  const R = M(E), f = (D) => l ? _ : `${U[n][t][D]}`, w = s([
-    P,
-    f("button"),
-    k,
-    F[S],
-    m && !a || r ? i[e].iconOnly : i[e].default,
-    !C && "tw-w-full"
+  inverted: E
+}, R) => {
+  t === o.Primary ? (t = o.Default, n = r.Strong) : t === o.Secondary && (t = o.Default, n = r.Default), y === !1 && (n = r.Weak);
+  const p = T(R), { buttonProps: D } = P({ onPress: () => B && B(), isDisabled: s, type: j[S] }, p), { isFocusVisible: w, focusProps: x } = v(), i = (F) => s ? Y : `${W[n][t][F]}`, I = u([
+    i("button"),
+    V,
+    _[C],
+    l && !a || m ? c[e].iconOnly : c[e].default,
+    !d && "tw-w-full"
   ]);
-  return /* @__PURE__ */ B.createElement("button", {
-    "aria-label": d,
-    "aria-disabled": l,
-    className: s([w, b && "tw-dark"]),
+  return /* @__PURE__ */ f.createElement("button", {
+    "aria-label": b,
+    "aria-disabled": s,
+    ref: p,
+    className: u([I, E && "tw-dark", w && $]),
+    disabled: s,
     "data-test-id": "button",
     form: g,
-    onClick: c,
-    type: V[p],
-    disabled: l,
-    ref: R
-  }, m && /* @__PURE__ */ B.createElement("span", {
+    ...D,
+    ...x
+  }, l && /* @__PURE__ */ f.createElement("span", {
     "data-test-id": "button-icon",
-    className: s([a && !r ? O[e] : "", f("icon")])
-  }, I(m, { size: W[e] })), a && /* @__PURE__ */ B.createElement("span", {
+    className: u([a && !m ? k[e] : "", i("icon")])
+  }, N(l, { size: q[e] })), a && /* @__PURE__ */ f.createElement("span", {
     "data-test-id": "button-text",
-    className: s([f("text"), r && "tw-sr-only"])
+    className: u([i("text"), m && "tw-sr-only"])
   }, a));
-}, J = x(Y);
+}, tt = M(A);
 export {
-  J as Button,
-  nt as ButtonCommonClasses,
-  at as ButtonDisabledClasses,
-  Q as ButtonEmphasis,
-  X as ButtonRounding,
-  st as ButtonRoundingClasses,
-  Z as ButtonSize,
-  ut as ButtonSizeClasses,
-  h as ButtonStyle,
-  rt as ButtonStyleClasses,
-  tt as ButtonType,
-  lt as IconSpacingClasses,
-  ot as UpdatedButtonStyle
+  tt as Button,
+  it as ButtonCommonClasses,
+  ft as ButtonDisabledClasses,
+  nt as ButtonEmphasis,
+  st as ButtonRounding,
+  Bt as ButtonRoundingClasses,
+  at as ButtonSize,
+  pt as ButtonSizeClasses,
+  ut as ButtonStyle,
+  ct as ButtonStyleClasses,
+  rt as ButtonType,
+  St as IconSpacingClasses,
+  mt as UpdatedButtonStyle
 };
 //# sourceMappingURL=Button.es.js.map

package/dist/components/Button/Button.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.es.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ForwardRefRenderFunction, MouseEvent, ReactElement, ReactNode, cloneElement, forwardRef } from 'react';\nimport { merge } from '@utilities/merge';\nimport { useForwardedRef } from '@utilities/useForwardedRef';\nimport {\n    ButtonElements,\n    ButtonEmphasis,\n    ButtonRounding,\n    ButtonSize,\n    ButtonStyle,\n    ButtonType,\n    UpdatedButtonStyle,\n} from './ButtonTypes';\nimport {\n    ButtonCommonClasses,\n    ButtonDisabledClasses,\n    ButtonRoundingClasses,\n    ButtonSizeClasses,\n    ButtonStyleClasses,\n    IconSpacingClasses,\n} from './ButtonClasses';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { buttonIconSizeMap, buttonTypeMap } from '@components/Button/mappings';\n\n// To be NON-Breaking but import should be done through index.ts\nexport * from './ButtonClasses';\nexport * from './ButtonTypes';\n\nexport type ButtonProps = {\n    type?: ButtonType;\n    style?: ButtonStyle;\n    emphasis?: ButtonEmphasis;\n    hideLabel?: boolean;\n    size?: ButtonSize;\n    rounding?: ButtonRounding;\n    disabled?: boolean;\n    icon?: ReactElement;\n    children?: ReactNode;\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    hugWidth?: boolean;\n    'aria-label'?: string;\n    formId?: string;\n    /** @deprecated use emphasis with ButtonEmphasis.Weak */\n    solid?: boolean;\n    /** @deprecated inverted can be done by wrapping the component in a className=\"tw-dark\" */\n    inverted?: boolean;\n};\n\nconst ButtonComponent: ForwardRefRenderFunction<HTMLButtonElement | null, ButtonProps> = (\n    {\n        type = ButtonType.Button,\n        style = ButtonStyle.Default,\n        size = ButtonSize.Medium,\n        rounding = ButtonRounding.Medium,\n        emphasis = ButtonEmphasis.Strong,\n        hideLabel = false,\n        disabled = false,\n        icon,\n        children,\n        onClick,\n        hugWidth = true,\n        'aria-label': ariaLabel,\n        formId,\n        solid,\n        inverted,\n    },\n    externalRef,\n) => {\n    // Map Style Primary, Secondary to style and emphasis\n    // Primary and Secondary can be omitted from the style type\n    if (style === ButtonStyle.Primary) {\n        style = ButtonStyle.Default;\n        emphasis = ButtonEmphasis.Strong;\n    } else if (style === ButtonStyle.Secondary) {\n        style = ButtonStyle.Default;\n        emphasis = ButtonEmphasis.Default;\n    }\n\n    // Rewrite Solid to property emphasis\n    if (solid === false) {\n        emphasis = ButtonEmphasis.Weak;\n    }\n\n    const ref = useForwardedRef<HTMLButtonElement | null>(externalRef);\n\n    const getStyles = (kind: keyof ButtonElements) =>\n        !disabled\n            ? `${ButtonStyleClasses[emphasis][style as unknown as UpdatedButtonStyle][kind]}`\n            : ButtonDisabledClasses;\n\n    const buttonClassName = merge([\n        FOCUS_VISIBLE_STYLE,\n        getStyles('button'),\n        ButtonCommonClasses,\n        ButtonRoundingClasses[rounding],\n        (icon && !children) || hideLabel ? ButtonSizeClasses[size].iconOnly : ButtonSizeClasses[size].default,\n        !hugWidth && 'tw-w-full',\n    ]);\n\n    return (\n        <button\n            aria-label={ariaLabel}\n            aria-disabled={disabled}\n            className={merge([buttonClassName, inverted && 'tw-dark'])}\n            data-test-id=\"button\"\n            form={formId}\n            onClick={onClick}\n            type={buttonTypeMap[type]}\n            disabled={disabled}\n            ref={ref}\n        >\n            {icon && (\n                <span\n                    data-test-id=\"button-icon\"\n                    className={merge([children && !hideLabel ? IconSpacingClasses[size] : '', getStyles('icon')])}\n                >\n                    {cloneElement(icon, { size: buttonIconSizeMap[size] })}\n                </span>\n            )}\n            {children && (\n                <span data-test-id=\"button-text\" className={merge([getStyles('text'), hideLabel && 'tw-sr-only'])}>\n                    {children}\n                </span>\n            )}\n        </button>\n    );\n};\n\nexport const Button = forwardRef(ButtonComponent);\n"],"names":[],"mappings":";;;;;;;;;AAiDA,MAAM,IAAmF,CACrF;AAAA,EACI,UAAO,EAAW;AAAA,EAClB,WAAQ,EAAY;AAAA,EACpB,UAAO,EAAW;AAAA,EAClB,cAAW,EAAe;AAAA,EAC1B,cAAW,EAAe;AAAA,EAC1B,eAAY;AAAA,EACZ,cAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,GAEJ,MACC;AAGG,EAAA,MAAU,EAAY,UACtB,KAAQ,EAAY,SACpB,IAAW,EAAe,UACnB,MAAU,EAAY,aAC7B,KAAQ,EAAY,SACpB,IAAW,EAAe,UAI1B,MAAU,MACV,KAAW,EAAe;AAGxB,QAAA,IAAM,EAA0C,CAAW,GAE3D,IAAY,CAAC,MACf,AAAC,IAEK,IADA,GAAG,EAAmB,GAAU,GAAwC,MAG5E,IAAkB,EAAM;AAAA,IAC1B;AAAA,IACA,EAAU,QAAQ;AAAA,IAClB;AAAA,IACA,EAAsB;AAAA,IACrB,KAAQ,CAAC,KAAa,IAAY,EAAkB,GAAM,WAAW,EAAkB,GAAM;AAAA,IAC9F,CAAC,KAAY;AAAA,EAAA,CAChB;AAED,SACK,kBAAA,cAAA,UAAA;AAAA,IACG,cAAY;AAAA,IACZ,iBAAe;AAAA,IACf,WAAW,EAAM,CAAC,GAAiB,KAAY,SAAS,CAAC;AAAA,IACzD,gBAAa;AAAA,IACb,MAAM;AAAA,IACN;AAAA,IACA,MAAM,EAAc;AAAA,IACpB;AAAA,IACA;AAAA,EAAA,GAEC,KACI,kBAAA,cAAA,QAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAW,EAAM,CAAC,KAAY,CAAC,IAAY,EAAmB,KAAQ,IAAI,EAAU,MAAM,CAAC,CAAC;AAAA,EAE3F,GAAA,EAAa,GAAM,EAAE,MAAM,EAAkB,GAAO,CAAA,CACzD,GAEH,KACI,kBAAA,cAAA,QAAA;AAAA,IAAK,gBAAa;AAAA,IAAc,WAAW,EAAM,CAAC,EAAU,MAAM,GAAG,KAAa,YAAY,CAAC;AAAA,EAAA,GAC3F,CACL,CAER;AAER,GAEa,IAAS,EAAW,CAAe;"}
+{"version":3,"file":"Button.es.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ForwardRefRenderFunction, MouseEvent, ReactElement, ReactNode, cloneElement, forwardRef } from 'react';\n\nimport { useButton } from '@react-aria/button';\nimport { merge } from '@utilities/merge';\nimport { useForwardedRef } from '@utilities/useForwardedRef';\nimport {\n    ButtonElements,\n    ButtonEmphasis,\n    ButtonRounding,\n    ButtonSize,\n    ButtonStyle,\n    ButtonType,\n    UpdatedButtonStyle,\n} from './ButtonTypes';\nimport {\n    ButtonCommonClasses,\n    ButtonDisabledClasses,\n    ButtonRoundingClasses,\n    ButtonSizeClasses,\n    ButtonStyleClasses,\n    IconSpacingClasses,\n} from './ButtonClasses';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { buttonIconSizeMap, buttonTypeMap } from '@components/Button/mappings';\nimport { useFocusRing } from '@react-aria/focus';\n\n// To be NON-Breaking but import should be done through index.ts\nexport * from './ButtonClasses';\nexport * from './ButtonTypes';\n\nexport type ButtonProps = {\n    type?: ButtonType;\n    style?: ButtonStyle;\n    emphasis?: ButtonEmphasis;\n    hideLabel?: boolean;\n    size?: ButtonSize;\n    rounding?: ButtonRounding;\n    disabled?: boolean;\n    icon?: ReactElement;\n    children?: ReactNode;\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    hugWidth?: boolean;\n    'aria-label'?: string;\n    formId?: string;\n    /** @deprecated use emphasis with ButtonEmphasis.Weak */\n    solid?: boolean;\n    /** @deprecated inverted can be done by wrapping the component in a className=\"tw-dark\" */\n    inverted?: boolean;\n};\n\nconst ButtonComponent: ForwardRefRenderFunction<HTMLButtonElement | null, ButtonProps> = (\n    {\n        type = ButtonType.Button,\n        style = ButtonStyle.Default,\n        size = ButtonSize.Medium,\n        rounding = ButtonRounding.Medium,\n        emphasis = ButtonEmphasis.Strong,\n        hideLabel = false,\n        disabled = false,\n        icon,\n        children,\n        onClick,\n        hugWidth = true,\n        'aria-label': ariaLabel,\n        formId,\n        solid,\n        inverted,\n    },\n    externalRef,\n) => {\n    // Map Style Primary, Secondary to style and emphasis\n    // Primary and Secondary can be omitted from the style type\n    if (style === ButtonStyle.Primary) {\n        style = ButtonStyle.Default;\n        emphasis = ButtonEmphasis.Strong;\n    } else if (style === ButtonStyle.Secondary) {\n        style = ButtonStyle.Default;\n        emphasis = ButtonEmphasis.Default;\n    }\n\n    // Rewrite Solid to property emphasis\n    if (solid === false) {\n        emphasis = ButtonEmphasis.Weak;\n    }\n\n    const ref = useForwardedRef<HTMLButtonElement | null>(externalRef);\n    const { buttonProps } = useButton(\n        { onPress: () => onClick && onClick(), isDisabled: disabled, type: buttonTypeMap[type] },\n        ref,\n    );\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const getStyles = (kind: keyof ButtonElements) =>\n        !disabled\n            ? `${ButtonStyleClasses[emphasis][style as unknown as UpdatedButtonStyle][kind]}`\n            : ButtonDisabledClasses;\n\n    const buttonClassName = merge([\n        getStyles('button'),\n        ButtonCommonClasses,\n        ButtonRoundingClasses[rounding],\n        (icon && !children) || hideLabel ? ButtonSizeClasses[size].iconOnly : ButtonSizeClasses[size].default,\n        !hugWidth && 'tw-w-full',\n    ]);\n\n    return (\n        <button\n            aria-label={ariaLabel}\n            aria-disabled={disabled}\n            ref={ref}\n            className={merge([buttonClassName, inverted && 'tw-dark', isFocusVisible && FOCUS_VISIBLE_STYLE])}\n            disabled={disabled}\n            data-test-id=\"button\"\n            form={formId}\n            {...buttonProps}\n            {...focusProps}\n        >\n            {icon && (\n                <span\n                    data-test-id=\"button-icon\"\n                    className={merge([children && !hideLabel ? IconSpacingClasses[size] : '', getStyles('icon')])}\n                >\n                    {cloneElement(icon, { size: buttonIconSizeMap[size] })}\n                </span>\n            )}\n            {children && (\n                <span data-test-id=\"button-text\" className={merge([getStyles('text'), hideLabel && 'tw-sr-only'])}>\n                    {children}\n                </span>\n            )}\n        </button>\n    );\n};\n\nexport const Button = forwardRef(ButtonComponent);\n"],"names":[],"mappings":";;;;;;;;;;;AAoDA,MAAM,IAAmF,CACrF;AAAA,EACI,UAAO,EAAW;AAAA,EAClB,WAAQ,EAAY;AAAA,EACpB,UAAO,EAAW;AAAA,EAClB,cAAW,EAAe;AAAA,EAC1B,cAAW,EAAe;AAAA,EAC1B,eAAY;AAAA,EACZ,cAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,GAEJ,MACC;AAGG,EAAA,MAAU,EAAY,UACtB,KAAQ,EAAY,SACpB,IAAW,EAAe,UACnB,MAAU,EAAY,aAC7B,KAAQ,EAAY,SACpB,IAAW,EAAe,UAI1B,MAAU,MACV,KAAW,EAAe;AAGxB,QAAA,IAAM,EAA0C,CAAW,GAC3D,EAAE,mBAAgB,EACpB,EAAE,SAAS,MAAM,KAAW,EAAQ,GAAG,YAAY,GAAU,MAAM,EAAc,GAAA,GACjF,CACJ,GACM,EAAE,mBAAgB,kBAAe,EAAa,GAE9C,IAAY,CAAC,MACf,AAAC,IAEK,IADA,GAAG,EAAmB,GAAU,GAAwC,MAG5E,IAAkB,EAAM;AAAA,IAC1B,EAAU,QAAQ;AAAA,IAClB;AAAA,IACA,EAAsB;AAAA,IACrB,KAAQ,CAAC,KAAa,IAAY,EAAkB,GAAM,WAAW,EAAkB,GAAM;AAAA,IAC9F,CAAC,KAAY;AAAA,EAAA,CAChB;AAED,SACK,kBAAA,cAAA,UAAA;AAAA,IACG,cAAY;AAAA,IACZ,iBAAe;AAAA,IACf;AAAA,IACA,WAAW,EAAM,CAAC,GAAiB,KAAY,WAAW,KAAkB,CAAmB,CAAC;AAAA,IAChG;AAAA,IACA,gBAAa;AAAA,IACb,MAAM;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,EAAA,GAEH,KACI,kBAAA,cAAA,QAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAW,EAAM,CAAC,KAAY,CAAC,IAAY,EAAmB,KAAQ,IAAI,EAAU,MAAM,CAAC,CAAC;AAAA,EAE3F,GAAA,EAAa,GAAM,EAAE,MAAM,EAAkB,GAAO,CAAA,CACzD,GAEH,KACI,kBAAA,cAAA,QAAA;AAAA,IAAK,gBAAa;AAAA,IAAc,WAAW,EAAM,CAAC,EAAU,MAAM,GAAG,KAAa,YAAY,CAAC;AAAA,EAAA,GAC3F,CACL,CAER;AAER,GAEa,KAAS,EAAW,CAAe;"}

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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"}