@frontify/fondue 12.0.0-beta.192 → 12.0.0-beta.194

package/dist/components/Button/Button.d.ts

@@ -21,5 +21,6 @@ export type ButtonProps = {
     solid?: boolean;
     /** @deprecated inverted can be done by wrapping the component in a className="tw-dark" */
     inverted?: boolean;
+    'data-test-id'?: string;
 };
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement | null>>;

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

@@ -1,22 +1,22 @@
-import l, { forwardRef as M, cloneElement as P } from "react";
-import { useButton as T } from "@react-aria/button";
+import l, { forwardRef as P, cloneElement as T } from "react";
+import { useButton as O } from "@react-aria/button";
 import { merge as r } from "../../utilities/merge.es.js";
-import { useForwardedRef as O } from "../../utilities/useForwardedRef.es.js";
-import { ButtonStyle as o, ButtonEmphasis as u, ButtonType as U, ButtonSize as V, ButtonRounding as _ } from "./ButtonTypes.es.js";
-import { UpdatedButtonStyle as at } from "./ButtonTypes.es.js";
-import { ButtonCommonClasses as k, ButtonRoundingClasses as z, ButtonSizeClasses as d, IconSpacingClasses as W, ButtonStyleClasses as Y, ButtonDisabledClasses as $ } from "./ButtonClasses.es.js";
-import { FOCUS_VISIBLE_STYLE as j } from "../../utilities/focusStyle.es.js";
-import { buttonTypeMap as q, buttonIconSizeMap as v } from "./mappings.es.js";
-import { useFocusRing as A } from "@react-aria/focus";
-const G = ({
-  type: B = U.Button,
+import { useForwardedRef as U } from "../../utilities/useForwardedRef.es.js";
+import { ButtonStyle as o, ButtonEmphasis as u, ButtonType as V, ButtonSize as _, ButtonRounding as k } from "./ButtonTypes.es.js";
+import { UpdatedButtonStyle as st } from "./ButtonTypes.es.js";
+import { ButtonCommonClasses as z, ButtonRoundingClasses as W, ButtonSizeClasses as d, IconSpacingClasses as Y, ButtonStyleClasses as $, ButtonDisabledClasses as j } from "./ButtonClasses.es.js";
+import { FOCUS_VISIBLE_STYLE as q } from "../../utilities/focusStyle.es.js";
+import { buttonTypeMap as v, buttonIconSizeMap as A } from "./mappings.es.js";
+import { useFocusRing as G } from "@react-aria/focus";
+const H = ({
+  type: B = V.Button,
   style: t = o.Default,
-  size: e = V.Medium,
-  rounding: b = _.Medium,
-  emphasis: n = u.Strong,
+  size: e = _.Medium,
+  rounding: b = k.Medium,
+  emphasis: a = u.Strong,
   hideLabel: m = !1,
-  disabled: a = !1,
-  icon: f,
+  disabled: n = !1,
+  icon: i,
   children: s,
   onClick: p,
   hugWidth: S = !0,
@@ -24,58 +24,59 @@ const G = ({
   "aria-describedby": C,
   formId: g,
   solid: E,
-  inverted: w
-}, D) => {
-  t === o.Primary ? (t = o.Default, n = u.Strong) : t === o.Secondary && (t = o.Default, n = u.Default), E === !1 && (n = u.Weak);
-  const c = O(D), { buttonProps: R } = T(
-    { onPress: () => p && p(), isDisabled: a, type: q[B] },
+  inverted: w,
+  "data-test-id": D = "button"
+}, R) => {
+  t === o.Primary ? (t = o.Default, a = u.Strong) : t === o.Secondary && (t = o.Default, a = u.Default), E === !1 && (a = u.Weak);
+  const c = U(R), { buttonProps: F } = O(
+    { onPress: () => p && p(), isDisabled: n, type: v[B] },
     c
-  ), { isFocusVisible: F, focusProps: N } = A(), i = (I) => a ? $ : `${Y[n][t][I]}`, x = r([
-    i("button"),
-    k,
-    z[b],
-    f && !s || m ? d[e].iconOnly : d[e].default,
+  ), { isFocusVisible: N, focusProps: x } = G(), f = (M) => n ? j : `${$[a][t][M]}`, I = r([
+    f("button"),
+    z,
+    W[b],
+    i && !s || m ? d[e].iconOnly : d[e].default,
     !S && "tw-w-full"
   ]);
   return /* @__PURE__ */ l.createElement(
     "button",
     {
+      "data-test-id": D,
       "aria-label": y,
-      "aria-disabled": a,
+      "aria-disabled": n,
       "aria-describedby": C,
       ref: c,
-      className: r([x, w && "tw-dark", F && j]),
-      disabled: a,
-      "data-test-id": "button",
+      className: r([I, w && "tw-dark", N && q]),
+      disabled: n,
       form: g,
-      ...R,
-      ...N
+      ...F,
+      ...x
     },
-    f && /* @__PURE__ */ l.createElement(
+    i && /* @__PURE__ */ l.createElement(
       "span",
       {
         "data-test-id": "button-icon",
-        className: r([s && !m ? W[e] : "", i("icon")])
+        className: r([s && !m ? Y[e] : "", f("icon")])
       },
-      P(f, { size: v[e] })
+      T(i, { size: A[e] })
     ),
-    s && /* @__PURE__ */ l.createElement("span", { "data-test-id": "button-text", className: r([i("text"), m && "tw-sr-only"]) }, s)
+    s && /* @__PURE__ */ l.createElement("span", { "data-test-id": "button-text", className: r([f("text"), m && "tw-sr-only"]) }, s)
   );
-}, H = M(G);
-H.displayName = "FondueButton";
+}, J = P(H);
+J.displayName = "FondueButton";
 export {
-  H as Button,
-  k as ButtonCommonClasses,
-  $ as ButtonDisabledClasses,
+  J as Button,
+  z as ButtonCommonClasses,
+  j as ButtonDisabledClasses,
   u as ButtonEmphasis,
-  _ as ButtonRounding,
-  z as ButtonRoundingClasses,
-  V as ButtonSize,
+  k as ButtonRounding,
+  W as ButtonRoundingClasses,
+  _ as ButtonSize,
   d as ButtonSizeClasses,
   o as ButtonStyle,
-  Y as ButtonStyleClasses,
-  U as ButtonType,
-  W as IconSpacingClasses,
-  at as UpdatedButtonStyle
+  $ as ButtonStyleClasses,
+  V as ButtonType,
+  Y as IconSpacingClasses,
+  st 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';\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    'aria-describedby'?: 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        'aria-describedby': ariaDescribedBy,\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            aria-describedby={ariaDescribedBy}\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);\nButton.displayName = 'FondueButton';\n"],"names":["ButtonComponent","type","ButtonType","style","ButtonStyle","size","ButtonSize","rounding","ButtonRounding","emphasis","ButtonEmphasis","hideLabel","disabled","icon","children","onClick","hugWidth","ariaLabel","ariaDescribedBy","formId","solid","inverted","externalRef","ref","useForwardedRef","buttonProps","useButton","buttonTypeMap","isFocusVisible","focusProps","useFocusRing","getStyles","kind","ButtonDisabledClasses","ButtonStyleClasses","buttonClassName","merge","ButtonCommonClasses","ButtonRoundingClasses","ButtonSizeClasses","React","FOCUS_VISIBLE_STYLE","IconSpacingClasses","cloneElement","buttonIconSizeMap","Button","forwardRef"],"mappings":";;;;;;;;;;AAqDA,MAAMA,IAAmF,CACrF;AAAA,EACI,MAAAC,IAAOC,EAAW;AAAA,EAClB,OAAAC,IAAQC,EAAY;AAAA,EACpB,MAAAC,IAAOC,EAAW;AAAA,EAClB,UAAAC,IAAWC,EAAe;AAAA,EAC1B,UAAAC,IAAWC,EAAe;AAAA,EAC1B,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,cAAcC;AAAA,EACd,oBAAoBC;AAAA,EACpB,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AACJ,GACAC,MACC;AAGG,EAAAnB,MAAUC,EAAY,WACtBD,IAAQC,EAAY,SACpBK,IAAWC,EAAe,UACnBP,MAAUC,EAAY,cAC7BD,IAAQC,EAAY,SACpBK,IAAWC,EAAe,UAI1BU,MAAU,OACVX,IAAWC,EAAe;AAGxB,QAAAa,IAAMC,EAA0CF,CAAW,GAC3D,EAAE,aAAAG,MAAgBC;AAAA,IACpB,EAAE,SAAS,MAAMX,KAAWA,EAAW,GAAA,YAAYH,GAAU,MAAMe,EAAc1B,CAAI,EAAE;AAAA,IACvFsB;AAAA,EAAA,GAEE,EAAE,gBAAAK,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAE9CC,IAAY,CAACC,MACdpB,IAEKqB,IADA,GAAGC,EAAmBzB,CAAQ,EAAEN,CAAsC,EAAE6B,CAAI,KAGhFG,IAAkBC,EAAM;AAAA,IAC1BL,EAAU,QAAQ;AAAA,IAClBM;AAAA,IACAC,EAAsB/B,CAAQ;AAAA,IAC7BM,KAAQ,CAACC,KAAaH,IAAY4B,EAAkBlC,CAAI,EAAE,WAAWkC,EAAkBlC,CAAI,EAAE;AAAA,IAC9F,CAACW,KAAY;AAAA,EAAA,CAChB;AAGG,SAAA,gBAAAwB,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,cAAYvB;AAAA,MACZ,iBAAeL;AAAA,MACf,oBAAkBM;AAAA,MAClB,KAAAK;AAAA,MACA,WAAWa,EAAM,CAACD,GAAiBd,KAAY,WAAWO,KAAkBa,CAAmB,CAAC;AAAA,MAChG,UAAA7B;AAAA,MACA,gBAAa;AAAA,MACb,MAAMO;AAAA,MACL,GAAGM;AAAA,MACH,GAAGI;AAAA,IAAA;AAAA,IAEHhB,KACG,gBAAA2B,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,gBAAa;AAAA,QACb,WAAWJ,EAAM,CAACtB,KAAY,CAACH,IAAY+B,EAAmBrC,CAAI,IAAI,IAAI0B,EAAU,MAAM,CAAC,CAAC;AAAA,MAAA;AAAA,MAE3FY,EAAa9B,GAAM,EAAE,MAAM+B,EAAkBvC,CAAI,GAAG;AAAA,IACzD;AAAA,IAEHS,KACG,gBAAA0B,EAAA,cAAC,QAAK,EAAA,gBAAa,eAAc,WAAWJ,EAAM,CAACL,EAAU,MAAM,GAAGpB,KAAa,YAAY,CAAC,KAC3FG,CACL;AAAA,EAAA;AAIhB,GAEa+B,IAASC,EAAW9C,CAAe;AAChD6C,EAAO,cAAc;"}
+{"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    'aria-describedby'?: 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    'data-test-id'?: string;\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        'aria-describedby': ariaDescribedBy,\n        formId,\n        solid,\n        inverted,\n        'data-test-id': dataTestId = 'button',\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            data-test-id={dataTestId}\n            aria-label={ariaLabel}\n            aria-disabled={disabled}\n            aria-describedby={ariaDescribedBy}\n            ref={ref}\n            className={merge([buttonClassName, inverted && 'tw-dark', isFocusVisible && FOCUS_VISIBLE_STYLE])}\n            disabled={disabled}\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);\nButton.displayName = 'FondueButton';\n"],"names":["ButtonComponent","type","ButtonType","style","ButtonStyle","size","ButtonSize","rounding","ButtonRounding","emphasis","ButtonEmphasis","hideLabel","disabled","icon","children","onClick","hugWidth","ariaLabel","ariaDescribedBy","formId","solid","inverted","dataTestId","externalRef","ref","useForwardedRef","buttonProps","useButton","buttonTypeMap","isFocusVisible","focusProps","useFocusRing","getStyles","kind","ButtonDisabledClasses","ButtonStyleClasses","buttonClassName","merge","ButtonCommonClasses","ButtonRoundingClasses","ButtonSizeClasses","React","FOCUS_VISIBLE_STYLE","IconSpacingClasses","cloneElement","buttonIconSizeMap","Button","forwardRef"],"mappings":";;;;;;;;;;AAsDA,MAAMA,IAAmF,CACrF;AAAA,EACI,MAAAC,IAAOC,EAAW;AAAA,EAClB,OAAAC,IAAQC,EAAY;AAAA,EACpB,MAAAC,IAAOC,EAAW;AAAA,EAClB,UAAAC,IAAWC,EAAe;AAAA,EAC1B,UAAAC,IAAWC,EAAe;AAAA,EAC1B,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,cAAcC;AAAA,EACd,oBAAoBC;AAAA,EACpB,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,GACAC,MACC;AAGG,EAAApB,MAAUC,EAAY,WACtBD,IAAQC,EAAY,SACpBK,IAAWC,EAAe,UACnBP,MAAUC,EAAY,cAC7BD,IAAQC,EAAY,SACpBK,IAAWC,EAAe,UAI1BU,MAAU,OACVX,IAAWC,EAAe;AAGxB,QAAAc,IAAMC,EAA0CF,CAAW,GAC3D,EAAE,aAAAG,MAAgBC;AAAA,IACpB,EAAE,SAAS,MAAMZ,KAAWA,EAAW,GAAA,YAAYH,GAAU,MAAMgB,EAAc3B,CAAI,EAAE;AAAA,IACvFuB;AAAA,EAAA,GAEE,EAAE,gBAAAK,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAE9CC,IAAY,CAACC,MACdrB,IAEKsB,IADA,GAAGC,EAAmB1B,CAAQ,EAAEN,CAAsC,EAAE8B,CAAI,KAGhFG,IAAkBC,EAAM;AAAA,IAC1BL,EAAU,QAAQ;AAAA,IAClBM;AAAA,IACAC,EAAsBhC,CAAQ;AAAA,IAC7BM,KAAQ,CAACC,KAAaH,IAAY6B,EAAkBnC,CAAI,EAAE,WAAWmC,EAAkBnC,CAAI,EAAE;AAAA,IAC9F,CAACW,KAAY;AAAA,EAAA,CAChB;AAGG,SAAA,gBAAAyB,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAcnB;AAAA,MACd,cAAYL;AAAA,MACZ,iBAAeL;AAAA,MACf,oBAAkBM;AAAA,MAClB,KAAAM;AAAA,MACA,WAAWa,EAAM,CAACD,GAAiBf,KAAY,WAAWQ,KAAkBa,CAAmB,CAAC;AAAA,MAChG,UAAA9B;AAAA,MACA,MAAMO;AAAA,MACL,GAAGO;AAAA,MACH,GAAGI;AAAA,IAAA;AAAA,IAEHjB,KACG,gBAAA4B,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,gBAAa;AAAA,QACb,WAAWJ,EAAM,CAACvB,KAAY,CAACH,IAAYgC,EAAmBtC,CAAI,IAAI,IAAI2B,EAAU,MAAM,CAAC,CAAC;AAAA,MAAA;AAAA,MAE3FY,EAAa/B,GAAM,EAAE,MAAMgC,EAAkBxC,CAAI,GAAG;AAAA,IACzD;AAAA,IAEHS,KACG,gBAAA2B,EAAA,cAAC,QAAK,EAAA,gBAAa,eAAc,WAAWJ,EAAM,CAACL,EAAU,MAAM,GAAGrB,KAAa,YAAY,CAAC,KAC3FG,CACL;AAAA,EAAA;AAIhB,GAEagC,IAASC,EAAW/C,CAAe;AAChD8C,EAAO,cAAc;"}

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

@@ -1,4 +1,4 @@
-import w, { useMemo as h, useCallback as X, Children as Z, useLayoutEffect as Ot } from "react";
+import g, { useMemo as h, useCallback as X, Children as Z, useLayoutEffect as Ot } from "react";
 import { motion as Rt } from "framer-motion";
 import { useSortable as Mt } from "@dnd-kit/sortable";
 import { useDndContext as kt, useDndMonitor as Wt } from "@dnd-kit/core";
@@ -11,15 +11,15 @@ import { INDENTATION_WIDTH as tt, ROOT_ID as Ut } from "../Tree.es.js";
 import { removeFragmentsAndEnrichChildren as $t } from "../utils/removeFragmentsAndEnrichChildren.es.js";
 import Kt from "../../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/noop.es.js";
 import { getItemPositionInParent as et } from "../helpers/getItemPositionInParent.es.js";
-const Vt = ({ isSorting: a, wasDragging: C }) => !(a || C), Yt = ({
-  id: a,
+const Vt = ({ isSorting: r, wasDragging: C }) => !(r || C), Yt = ({
+  id: r,
   type: C,
   label: f,
   onDrop: S,
   accepts: nt,
   children: x,
-  parentId: i,
-  level: l = 0,
+  parentId: c,
+  level: u = 0,
   contentComponent: N,
   draggable: at = !0,
   "data-test-id": rt = "fondue-tree-item"
@@ -28,66 +28,72 @@ const Vt = ({ isSorting: a, wasDragging: C }) => !(a || C), Yt = ({
   const {
     onExpand: st,
     onSelect: L,
-    treeState: d,
+    treeState: o,
     registerOverlay: O,
     registerNodeChildren: R,
     unregisterNodeChildren: P,
     draggable: dt
-  } = Bt(), { active: r, over: s } = kt(), M = dt && at, n = (r == null ? void 0 : r.id) === a, ot = d.nodes.findIndex(({ props: e }) => e.id === (r == null ? void 0 : r.id)), it = d.nodes.findIndex(({ props: e }) => e.id === (s == null ? void 0 : s.id)), v = ot < it, y = !v, t = h(() => n ? d.projection : null, [n, d.projection]), u = h(() => d.nodes.find(({ props: e }) => e.id === (t == null ? void 0 : t.parentId)), [t == null ? void 0 : t.parentId, d.nodes]), b = h(() => {
+  } = Bt(), { active: s, over: d } = kt(), M = dt && at, n = (s == null ? void 0 : s.id) === r, ot = o.nodes.findIndex(({ props: e }) => e.id === (s == null ? void 0 : s.id)), it = o.nodes.findIndex(({ props: e }) => e.id === (d == null ? void 0 : d.id)), y = ot < it, v = !y, t = h(() => n ? o.projection : null, [n, o.projection]), p = h(() => o.nodes.find(({ props: e }) => e.id === (t == null ? void 0 : t.parentId)), [t == null ? void 0 : t.parentId, o.nodes]), b = h(() => {
     var e;
-    return t !== null && s !== null && t.depth > ((e = s.data.current) == null ? void 0 : e.level);
-  }, [t, s]), T = n && !b && r.data.current && ((H = s == null ? void 0 : s.data.current) == null ? void 0 : H.accepts) !== void 0 && s.data.current.accepts.includes(r.data.current.type);
-  let D = v && n && b && r.data.current && ((U = s == null ? void 0 : s.data.current) == null ? void 0 : U.accepts) !== void 0 && (t == null ? void 0 : t.depth) !== (t == null ? void 0 : t.minDepth) && s.data.current.accepts.includes(`${r.data.current.type}-within`), p = y && n && b && r.data.current && t && (u == null ? void 0 : u.props.accepts) && u.props.accepts.includes(`${r.data.current.type}-within`);
+    return t !== null && d !== null && t.depth > ((e = d.data.current) == null ? void 0 : e.level);
+  }, [t, d]), T = n && !b && s.data.current && ((H = d == null ? void 0 : d.data.current) == null ? void 0 : H.accepts) !== void 0 && d.data.current.accepts.includes(s.data.current.type);
+  let D = y && n && b && s.data.current && ((U = d == null ? void 0 : d.data.current) == null ? void 0 : U.accepts) !== void 0 && (t == null ? void 0 : t.depth) !== (t == null ? void 0 : t.minDepth) && d.data.current.accepts.includes(`${s.data.current.type}-within`), m = v && n && b && s.data.current && t && (p == null ? void 0 : p.props.accepts) && p.props.accepts.includes(`${s.data.current.type}-within`);
   const ct = (e) => {
     var $, K, V, Y, q, z, G, J, Q;
-    const { over: o, active: I } = e;
-    if (!(I.id === (o == null ? void 0 : o.id) && (t == null ? void 0 : t.depth) === (t == null ? void 0 : t.minDepth)) && (y && (D = !1), v && (p = !1), n && o && (T || D || p))) {
+    const { over: i, active: I } = e;
+    if (!(I.id === (i == null ? void 0 : i.id) && (t == null ? void 0 : t.depth) === (t == null ? void 0 : t.minDepth)) && (v && (D = !1), y && (m = !1), n && i && (T || D || m))) {
       const At = et(
-        { id: o.id, parentId: (K = ($ = o.data) == null ? void 0 : $.current) == null ? void 0 : K.parentId },
-        d.nodes
+        { id: i.id, parentId: (K = ($ = i.data) == null ? void 0 : $.current) == null ? void 0 : K.parentId },
+        o.nodes
       ), Lt = et(
         { id: I.id, parentId: (Y = (V = I.data) == null ? void 0 : V.current) == null ? void 0 : Y.parentId },
-        d.nodes
+        o.nodes
       );
       let A = null;
-      T ? A = "after" : (D || p) && (A = "within"), S == null || S(
+      T ? A = "after" : (D || m) && (A = "within"), S == null || S(
         {
-          id: p ? ((q = t == null ? void 0 : t.parentId) == null ? void 0 : q.toString()) ?? "ID not found" : o.id.toString(),
-          type: p ? u == null ? void 0 : u.props.type : (G = (z = o == null ? void 0 : o.data) == null ? void 0 : z.current) == null ? void 0 : G.type,
-          sort: At + 1
+          id: m ? ((q = t == null ? void 0 : t.parentId) == null ? void 0 : q.toString()) ?? "ID not found" : i.id.toString(),
+          type: m ? p == null ? void 0 : p.props.type : (G = (z = i == null ? void 0 : i.data) == null ? void 0 : z.current) == null ? void 0 : G.type,
+          sort: At + 1,
+          parentId: (t == null ? void 0 : t.parentId) ?? ""
+        },
+        {
+          id: I.id.toString(),
+          type: (Q = (J = I.data) == null ? void 0 : J.current) == null ? void 0 : Q.type,
+          sort: Lt + 1,
+          parentId: c ?? ""
         },
-        { id: I.id.toString(), type: (Q = (J = I.data) == null ? void 0 : J.current) == null ? void 0 : Q.type, sort: Lt + 1 },
         A,
-        y ? "up" : "down"
+        v ? "up" : "down"
       );
     }
   }, lt = X(
     (e) => {
-      e.active.id === a && O({ contentComponent: N, children: x, id: a, label: f, level: l });
+      e.active.id === r && O({ contentComponent: N, children: x, id: r, label: f, level: u });
     },
-    [x, N, a, f, l, O]
+    [x, N, r, f, u, O]
   );
   Wt({
     onDragEnd: ct,
     onDragStart: lt
   });
-  const g = d.selectedIds.has(a), E = d.expandedIds.has(a), k = i === Ut, W = i && (r == null ? void 0 : r.id) === i, _ = k || i && d.expandedIds.has(i), B = k || i && d.nodes.some((e) => e.props.id === i), F = Z.count(x) > 0, c = h(
-    () => $t(x, { parentId: a, level: l + 1 }),
-    [x, a, l]
-  ), ut = h(() => c.map((e) => e.props.id), [c]), { attributes: mt, listeners: pt, transform: m, setDraggableNodeRef: gt, setDroppableNodeRef: wt, setActivatorNodeRef: ht } = Mt({
-    id: a,
+  const w = o.selectedIds.has(r), E = o.expandedIds.has(r), k = c === Ut, W = c && (s == null ? void 0 : s.id) === c, _ = k || c && o.expandedIds.has(c), B = k || c && o.nodes.some((e) => e.props.id === c), F = Z.count(x) > 0, l = h(
+    () => $t(x, { parentId: r, level: u + 1 }),
+    [x, r, u]
+  ), ut = h(() => l.map((e) => e.props.id), [l]), { attributes: pt, listeners: mt, transform: a, setDraggableNodeRef: wt, setDroppableNodeRef: gt, setActivatorNodeRef: ht } = Mt({
+    id: r,
     disabled: !M,
-    data: { type: C, accepts: nt, parentId: i, level: l },
+    data: { type: C, accepts: nt, parentId: c, level: u },
     animateLayoutChanges: Vt,
     transition: null
   });
   Ot(() => {
-    if (Z.count(c) !== 0) {
+    if (Z.count(l) !== 0) {
       if (!B || !_ || n || W) {
-        P(c);
+        P(l);
         return;
       }
-      E ? R({ id: c[0].props.parentId, children: c }) : P(c);
+      E ? R({ id: l[0].props.parentId, children: l }) : P(l);
     }
   }, [
     n,
@@ -95,56 +101,57 @@ const Vt = ({ isSorting: a, wasDragging: C }) => !(a || C), Yt = ({
     W,
     _,
     B,
-    c,
+    l,
     R,
     P
   ]);
   const ft = X(
     (e) => {
-      e.stopPropagation(), L(a);
+      e.stopPropagation(), L(r);
     },
-    [a, L]
+    [r, L]
   ), xt = (e) => {
-    e.stopPropagation(), st(a);
+    e.stopPropagation(), st(r);
   }, bt = h(
     () => j([
       _t,
-      !n && !g && "focus-within:tw-bg-box-neutral",
+      !n && !w && "focus-within:tw-bg-box-neutral",
       "tw-outline-none tw-ring-inset tw-group tw-px-2.5 tw-no-underline tw-leading-5 tw-h-10",
-      g ? "tw-font-medium tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover" : "hover:tw-bg-box-neutral tw-text-text"
+      w && !(a != null && a.y) ? "tw-font-medium tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover" : "hover:tw-bg-box-neutral tw-text-text",
+      a != null && a.y ? "tw-bg-box-neutral-strong-inverse tw-text-text tw-font-normal" : ""
     ]),
-    [n, g]
+    [n, w, a]
   ), It = j([
     "tw-flex tw-items-center tw-h-10 tw-leading-5 tw-width-full",
     n && "tw-border-box-selected-strong tw-border-dashed tw-border-2 tw-bg-box-selected-hover",
-    n && (b && !(v && D || y && p) || !b && !T) && "tw-bg-box-negative-hover tw-border-box-negative-strong-hover tw-border-dashed tw-border-2"
-  ]), vt = t != null && t.depth ? t.depth * tt : void 0, yt = n ? 0 : l * tt, Dt = {
-    paddingLeft: vt ?? yt
+    n && (b && !(y && D || v && m) || !b && !T) && "tw-bg-box-negative-hover tw-border-box-negative-strong-hover tw-border-dashed tw-border-2"
+  ]), yt = t != null && t.depth ? t.depth * tt : void 0, vt = n ? 0 : u * tt, Dt = {
+    paddingLeft: yt ?? vt
   }, Et = !n, Ct = E && !n, St = M && !n, Nt = f !== void 0 && !n, Pt = F && !n, Tt = {
-    x: m == null ? void 0 : m.x,
-    y: m == null ? void 0 : m.y
+    x: a == null ? void 0 : a.x,
+    y: a == null ? void 0 : a.y
   };
-  return /* @__PURE__ */ w.createElement(
+  return /* @__PURE__ */ g.createElement(
     "li",
     {
-      key: a,
+      key: r,
       tabIndex: 0,
       role: "treeitem",
       style: Dt,
-      id: a.toString(),
+      id: r.toString(),
       "aria-label": f,
-      "aria-level": l,
+      "aria-level": u,
       onClick: ft,
       className: bt,
-      ref: wt,
+      ref: gt,
       "data-test-id": rt,
-      "aria-selected": g,
+      "aria-selected": w,
       "aria-expanded": E,
       "data-has-children": F,
       "aria-owns": ut.join(" "),
       onKeyDown: Kt
     },
-    /* @__PURE__ */ w.createElement(
+    /* @__PURE__ */ g.createElement(
       Rt.div,
       {
         transition: {
@@ -152,21 +159,21 @@ const Vt = ({ isSorting: a, wasDragging: C }) => !(a || C), Yt = ({
           delay: 0,
           duration: 0
         },
-        ref: gt,
+        ref: wt,
         className: It,
-        animate: m ? Tt : void 0
+        animate: a ? Tt : void 0
       },
-      St ? /* @__PURE__ */ w.createElement(Ft, { ref: ht, active: g, ...pt, ...mt }) : /* @__PURE__ */ w.createElement("div", { className: "tw-w-5 tw-ml-2 tw-min-w-[20px]" }),
-      /* @__PURE__ */ w.createElement(
+      St ? /* @__PURE__ */ g.createElement(Ft, { ref: ht, active: w, ...mt, ...pt }) : /* @__PURE__ */ g.createElement("div", { className: "tw-w-5 tw-ml-2 tw-min-w-[20px]" }),
+      /* @__PURE__ */ g.createElement(
         Ht,
         {
           onClick: xt,
           expanded: Ct,
           disabled: !Pt,
-          active: g
+          active: a != null && a.y ? !1 : w
         }
       ),
-      Nt ? /* @__PURE__ */ w.createElement("span", { className: "first:tw-ml-3.5 tw-w-full tw-h-full tw-flex tw-items-center" }, f) : null,
+      Nt ? /* @__PURE__ */ g.createElement("span", { className: "first:tw-ml-3.5 tw-w-full tw-h-full tw-flex tw-items-center" }, f) : null,
       Et && N
     )
   );

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

@@ -1 +1 @@
-{"version":3,"file":"TreeItem.es.js","sources":["../../../../src/components/Tree/TreeItem/TreeItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { Children, MouseEvent, useCallback, useLayoutEffect, useMemo } from 'react';\nimport { motion } from 'framer-motion';\nimport { AnimateLayoutChanges, useSortable } from '@dnd-kit/sortable';\nimport { useDndContext, useDndMonitor } from '@dnd-kit/core';\nimport { noop } from 'lodash-es';\n\nimport { merge } from '@utilities/merge';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\n\nimport type { CollisionPosition, TreeDragEndEvent, TreeDragStartEvent, TreeItemProps } from '@components/Tree/types';\nimport { useTreeContext } from '@components/Tree/TreeContext';\n\nimport { DragHandle } from './DragHandle';\nimport { removeFragmentsAndEnrichChildren } from '../utils';\nimport { ExpandButton } from './ExpandButton';\nimport { INDENTATION_WIDTH, ROOT_ID } from '../Tree';\nimport { getItemPositionInParent } from '../helpers';\n\nconst animateLayoutChanges: AnimateLayoutChanges = ({ isSorting, wasDragging }) =>\n    isSorting || wasDragging ? false : true;\n\nexport const TreeItem = ({\n    id,\n    type,\n    label,\n    onDrop,\n    accepts,\n    children,\n    parentId,\n    level = 0,\n    contentComponent,\n    draggable: itemDraggable = true,\n    'data-test-id': dataTestId = 'fondue-tree-item',\n}: TreeItemProps) => {\n    const {\n        onExpand,\n        onSelect,\n        treeState,\n        registerOverlay,\n        registerNodeChildren,\n        unregisterNodeChildren,\n        draggable: treeDraggable,\n    } = useTreeContext();\n\n    const { active, over } = useDndContext();\n\n    const draggable = treeDraggable && itemDraggable;\n\n    const isActive = active?.id === id;\n\n    const activeIndex = treeState.nodes.findIndex(({ props }) => props.id === active?.id);\n    const overIndex = treeState.nodes.findIndex(({ props }) => props.id === over?.id);\n\n    const movingDown = activeIndex < overIndex;\n    const movingUp = !movingDown;\n\n    const projection = useMemo(() => {\n        return isActive ? treeState.projection : null;\n    }, [isActive, treeState.projection]);\n\n    const projectionNode = useMemo(() => {\n        return treeState.nodes.find(({ props }) => props.id === projection?.parentId);\n    }, [projection?.parentId, treeState.nodes]);\n\n    const isWithin = useMemo(() => {\n        return projection !== null && over !== null && projection.depth > over.data.current?.level;\n    }, [projection, over]);\n\n    const canDrop =\n        isActive &&\n        !isWithin &&\n        active.data.current &&\n        over?.data.current?.accepts !== undefined &&\n        over.data.current.accepts.includes(active.data.current.type);\n\n    // Moving down the tree\n    let canDropWithinMovingDown =\n        movingDown &&\n        isActive &&\n        isWithin &&\n        active.data.current &&\n        over?.data.current?.accepts !== undefined &&\n        projection?.depth !== projection?.minDepth &&\n        over.data.current.accepts.includes(`${active.data.current.type}-within`);\n\n    // Moving up the tree\n    let canDropWithinMovingUp =\n        movingUp &&\n        isActive &&\n        isWithin &&\n        active.data.current &&\n        projection &&\n        projectionNode?.props.accepts &&\n        projectionNode.props.accepts.includes(`${active.data.current.type}-within`);\n\n    const handleItemDragEnd = (event: TreeDragEndEvent) => {\n        const { over, active } = event;\n\n        if (active.id === over?.id && projection?.depth === projection?.minDepth) {\n            return;\n        }\n\n        if (movingUp) {\n            canDropWithinMovingDown = false;\n        }\n\n        if (movingDown) {\n            canDropWithinMovingUp = false;\n        }\n\n        if (isActive && over && (canDrop || canDropWithinMovingDown || canDropWithinMovingUp)) {\n            const sortOver = getItemPositionInParent(\n                { id: over.id, parentId: over.data?.current?.parentId },\n                treeState.nodes,\n            );\n\n            const sortActive = getItemPositionInParent(\n                { id: active.id, parentId: active.data?.current?.parentId },\n                treeState.nodes,\n            );\n\n            let position: CollisionPosition = null;\n            if (canDrop) {\n                position = 'after';\n            } else if (canDropWithinMovingDown || canDropWithinMovingUp) {\n                position = 'within';\n            }\n\n            onDrop?.(\n                {\n                    id: canDropWithinMovingUp ? projection?.parentId?.toString() ?? 'ID not found' : over.id.toString(),\n                    type: canDropWithinMovingUp ? projectionNode?.props.type : over?.data?.current?.type,\n                    sort: sortOver + 1,\n                },\n                { id: active.id.toString(), type: active.data?.current?.type, sort: sortActive + 1 },\n                position,\n                movingUp ? 'up' : 'down',\n            );\n        }\n    };\n\n    const handleItemDragStart = useCallback(\n        (event: TreeDragStartEvent) => {\n            if (event.active.id !== id) {\n                return;\n            }\n\n            registerOverlay({ contentComponent, children, id, label, level });\n        },\n        [children, contentComponent, id, label, level, registerOverlay],\n    );\n\n    useDndMonitor({\n        onDragEnd: handleItemDragEnd,\n        onDragStart: handleItemDragStart,\n    });\n\n    const isSelected = treeState.selectedIds.has(id);\n    const isExpanded = treeState.expandedIds.has(id);\n\n    const isParentRoot = parentId === ROOT_ID;\n    const isParentActive = parentId && active?.id === parentId;\n    const isParentExpanded = isParentRoot || (parentId && treeState.expandedIds.has(parentId));\n    const isAncestorMounted = isParentRoot || (parentId && treeState.nodes.some((node) => node.props.id === parentId));\n\n    const hasChildren = Children.count(children) > 0;\n\n    const enrichedChildren = useMemo(\n        () => removeFragmentsAndEnrichChildren(children, { parentId: id, level: level + 1 }),\n        [children, id, level],\n    );\n\n    const childrenIds = useMemo(() => enrichedChildren.map((child) => child.props.id), [enrichedChildren]);\n\n    const { attributes, listeners, transform, setDraggableNodeRef, setDroppableNodeRef, setActivatorNodeRef } =\n        useSortable({\n            id,\n            disabled: !draggable,\n            data: { type, accepts, parentId, level },\n            animateLayoutChanges,\n            transition: null,\n        });\n\n    useLayoutEffect(() => {\n        if (Children.count(enrichedChildren) === 0) {\n            return;\n        }\n\n        if (!isAncestorMounted || !isParentExpanded || isActive || isParentActive) {\n            unregisterNodeChildren(enrichedChildren);\n            return;\n        }\n\n        if (isExpanded) {\n            registerNodeChildren({ id: enrichedChildren[0].props.parentId, children: enrichedChildren });\n        } else {\n            unregisterNodeChildren(enrichedChildren);\n        }\n    }, [\n        isActive,\n        isExpanded,\n        isParentActive,\n        isParentExpanded,\n        isAncestorMounted,\n        enrichedChildren,\n        registerNodeChildren,\n        unregisterNodeChildren,\n    ]);\n\n    const handleSelect = useCallback(\n        (event: MouseEvent<HTMLElement, globalThis.MouseEvent>) => {\n            event.stopPropagation();\n\n            onSelect(id);\n        },\n        [id, onSelect],\n    );\n\n    const handleExpand = (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => {\n        event.stopPropagation();\n\n        onExpand(id);\n    };\n\n    const liClassName = useMemo(\n        () =>\n            merge([\n                FOCUS_VISIBLE_STYLE,\n                !isActive && !isSelected && 'focus-within:tw-bg-box-neutral',\n                'tw-outline-none tw-ring-inset tw-group tw-px-2.5 tw-no-underline tw-leading-5 tw-h-10',\n                isSelected\n                    ? 'tw-font-medium tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover'\n                    : 'hover:tw-bg-box-neutral tw-text-text',\n            ]),\n        [isActive, isSelected],\n    );\n\n    const containerClassName = merge([\n        'tw-flex tw-items-center tw-h-10 tw-leading-5 tw-width-full',\n        isActive && 'tw-border-box-selected-strong tw-border-dashed tw-border-2 tw-bg-box-selected-hover',\n        isActive &&\n            ((isWithin && !((movingDown && canDropWithinMovingDown) || (movingUp && canDropWithinMovingUp))) ||\n                (!isWithin && !canDrop)) &&\n            'tw-bg-box-negative-hover tw-border-box-negative-strong-hover tw-border-dashed tw-border-2',\n    ]);\n\n    const depthPadding = projection?.depth ? projection.depth * INDENTATION_WIDTH : undefined;\n    const levelPadding = isActive ? 0 : level * INDENTATION_WIDTH;\n\n    const liStyle = {\n        paddingLeft: depthPadding ?? levelPadding,\n    };\n\n    const showContent = !isActive;\n    const showChildren = isExpanded && !isActive;\n    const showDragHandle = draggable && !isActive;\n    const showLabel = label !== undefined && !isActive;\n    const showExpandButton = hasChildren && !isActive;\n\n    const animate = {\n        x: transform?.x,\n        y: transform?.y,\n    };\n\n    return (\n        <li\n            key={id}\n            tabIndex={0}\n            role=\"treeitem\"\n            style={liStyle}\n            id={id.toString()}\n            aria-label={label}\n            aria-level={level}\n            onClick={handleSelect}\n            className={liClassName}\n            ref={setDroppableNodeRef}\n            data-test-id={dataTestId}\n            aria-selected={isSelected}\n            aria-expanded={isExpanded}\n            data-has-children={hasChildren}\n            aria-owns={childrenIds.join(' ')}\n            onKeyDown={noop}\n        >\n            <motion.div\n                transition={{\n                    bounce: 0,\n                    delay: 0,\n                    duration: 0,\n                }}\n                ref={setDraggableNodeRef}\n                className={containerClassName}\n                animate={transform ? animate : undefined}\n            >\n                {showDragHandle ? (\n                    <DragHandle ref={setActivatorNodeRef} active={isSelected} {...listeners} {...attributes} />\n                ) : (\n                    <div className=\"tw-w-5 tw-ml-2 tw-min-w-[20px]\" />\n                )}\n\n                <ExpandButton\n                    onClick={handleExpand}\n                    expanded={showChildren}\n                    disabled={!showExpandButton}\n                    active={isSelected}\n                />\n\n                {showLabel ? (\n                    <span className=\"first:tw-ml-3.5 tw-w-full tw-h-full tw-flex tw-items-center\">{label}</span>\n                ) : null}\n\n                {showContent && contentComponent}\n            </motion.div>\n        </li>\n    );\n};\n\nTreeItem.displayName = 'FondueTreeItem';\n"],"names":["animateLayoutChanges","isSorting","wasDragging","TreeItem","id","type","label","onDrop","accepts","children","parentId","level","contentComponent","itemDraggable","dataTestId","onExpand","onSelect","treeState","registerOverlay","registerNodeChildren","unregisterNodeChildren","treeDraggable","useTreeContext","active","over","useDndContext","draggable","isActive","activeIndex","props","overIndex","movingDown","movingUp","projection","useMemo","projectionNode","isWithin","_a","canDrop","canDropWithinMovingDown","_b","canDropWithinMovingUp","handleItemDragEnd","event","sortOver","getItemPositionInParent","sortActive","position","_e","handleItemDragStart","useCallback","useDndMonitor","isSelected","isExpanded","isParentRoot","ROOT_ID","isParentActive","isParentExpanded","isAncestorMounted","node","hasChildren","Children","enrichedChildren","removeFragmentsAndEnrichChildren","childrenIds","child","attributes","listeners","transform","setDraggableNodeRef","setDroppableNodeRef","setActivatorNodeRef","useSortable","useLayoutEffect","handleSelect","handleExpand","liClassName","merge","FOCUS_VISIBLE_STYLE","containerClassName","depthPadding","INDENTATION_WIDTH","levelPadding","liStyle","showContent","showChildren","showDragHandle","showLabel","showExpandButton","animate","React","noop","motion","DragHandle","ExpandButton"],"mappings":"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"}
+{"version":3,"file":"TreeItem.es.js","sources":["../../../../src/components/Tree/TreeItem/TreeItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { Children, MouseEvent, useCallback, useLayoutEffect, useMemo } from 'react';\nimport { motion } from 'framer-motion';\nimport { AnimateLayoutChanges, useSortable } from '@dnd-kit/sortable';\nimport { useDndContext, useDndMonitor } from '@dnd-kit/core';\nimport { noop } from 'lodash-es';\n\nimport { merge } from '@utilities/merge';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\n\nimport type { CollisionPosition, TreeDragEndEvent, TreeDragStartEvent, TreeItemProps } from '@components/Tree/types';\nimport { useTreeContext } from '@components/Tree/TreeContext';\n\nimport { DragHandle } from './DragHandle';\nimport { removeFragmentsAndEnrichChildren } from '../utils';\nimport { ExpandButton } from './ExpandButton';\nimport { INDENTATION_WIDTH, ROOT_ID } from '../Tree';\nimport { getItemPositionInParent } from '../helpers';\n\nconst animateLayoutChanges: AnimateLayoutChanges = ({ isSorting, wasDragging }) =>\n    isSorting || wasDragging ? false : true;\n\nexport const TreeItem = ({\n    id,\n    type,\n    label,\n    onDrop,\n    accepts,\n    children,\n    parentId,\n    level = 0,\n    contentComponent,\n    draggable: itemDraggable = true,\n    'data-test-id': dataTestId = 'fondue-tree-item',\n}: TreeItemProps) => {\n    const {\n        onExpand,\n        onSelect,\n        treeState,\n        registerOverlay,\n        registerNodeChildren,\n        unregisterNodeChildren,\n        draggable: treeDraggable,\n    } = useTreeContext();\n\n    const { active, over } = useDndContext();\n\n    const draggable = treeDraggable && itemDraggable;\n\n    const isActive = active?.id === id;\n\n    const activeIndex = treeState.nodes.findIndex(({ props }) => props.id === active?.id);\n    const overIndex = treeState.nodes.findIndex(({ props }) => props.id === over?.id);\n\n    const movingDown = activeIndex < overIndex;\n    const movingUp = !movingDown;\n\n    const projection = useMemo(() => {\n        return isActive ? treeState.projection : null;\n    }, [isActive, treeState.projection]);\n\n    const projectionNode = useMemo(() => {\n        return treeState.nodes.find(({ props }) => props.id === projection?.parentId);\n    }, [projection?.parentId, treeState.nodes]);\n\n    const isWithin = useMemo(() => {\n        return projection !== null && over !== null && projection.depth > over.data.current?.level;\n    }, [projection, over]);\n\n    const canDrop =\n        isActive &&\n        !isWithin &&\n        active.data.current &&\n        over?.data.current?.accepts !== undefined &&\n        over.data.current.accepts.includes(active.data.current.type);\n\n    // Moving down the tree\n    let canDropWithinMovingDown =\n        movingDown &&\n        isActive &&\n        isWithin &&\n        active.data.current &&\n        over?.data.current?.accepts !== undefined &&\n        projection?.depth !== projection?.minDepth &&\n        over.data.current.accepts.includes(`${active.data.current.type}-within`);\n\n    // Moving up the tree\n    let canDropWithinMovingUp =\n        movingUp &&\n        isActive &&\n        isWithin &&\n        active.data.current &&\n        projection &&\n        projectionNode?.props.accepts &&\n        projectionNode.props.accepts.includes(`${active.data.current.type}-within`);\n\n    const handleItemDragEnd = (event: TreeDragEndEvent) => {\n        const { over, active } = event;\n\n        if (active.id === over?.id && projection?.depth === projection?.minDepth) {\n            return;\n        }\n\n        if (movingUp) {\n            canDropWithinMovingDown = false;\n        }\n\n        if (movingDown) {\n            canDropWithinMovingUp = false;\n        }\n\n        if (isActive && over && (canDrop || canDropWithinMovingDown || canDropWithinMovingUp)) {\n            const sortOver = getItemPositionInParent(\n                { id: over.id, parentId: over.data?.current?.parentId },\n                treeState.nodes,\n            );\n\n            const sortActive = getItemPositionInParent(\n                { id: active.id, parentId: active.data?.current?.parentId },\n                treeState.nodes,\n            );\n\n            let position: CollisionPosition = null;\n            if (canDrop) {\n                position = 'after';\n            } else if (canDropWithinMovingDown || canDropWithinMovingUp) {\n                position = 'within';\n            }\n\n            onDrop?.(\n                {\n                    id: canDropWithinMovingUp ? projection?.parentId?.toString() ?? 'ID not found' : over.id.toString(),\n                    type: canDropWithinMovingUp ? projectionNode?.props.type : over?.data?.current?.type,\n                    sort: sortOver + 1,\n                    parentId: projection?.parentId ?? '',\n                },\n                {\n                    id: active.id.toString(),\n                    type: active.data?.current?.type,\n                    sort: sortActive + 1,\n                    parentId: parentId ?? '',\n                },\n                position,\n                movingUp ? 'up' : 'down',\n            );\n        }\n    };\n\n    const handleItemDragStart = useCallback(\n        (event: TreeDragStartEvent) => {\n            if (event.active.id !== id) {\n                return;\n            }\n\n            registerOverlay({ contentComponent, children, id, label, level });\n        },\n        [children, contentComponent, id, label, level, registerOverlay],\n    );\n\n    useDndMonitor({\n        onDragEnd: handleItemDragEnd,\n        onDragStart: handleItemDragStart,\n    });\n\n    const isSelected = treeState.selectedIds.has(id);\n    const isExpanded = treeState.expandedIds.has(id);\n\n    const isParentRoot = parentId === ROOT_ID;\n    const isParentActive = parentId && active?.id === parentId;\n    const isParentExpanded = isParentRoot || (parentId && treeState.expandedIds.has(parentId));\n    const isAncestorMounted = isParentRoot || (parentId && treeState.nodes.some((node) => node.props.id === parentId));\n\n    const hasChildren = Children.count(children) > 0;\n\n    const enrichedChildren = useMemo(\n        () => removeFragmentsAndEnrichChildren(children, { parentId: id, level: level + 1 }),\n        [children, id, level],\n    );\n\n    const childrenIds = useMemo(() => enrichedChildren.map((child) => child.props.id), [enrichedChildren]);\n\n    const { attributes, listeners, transform, setDraggableNodeRef, setDroppableNodeRef, setActivatorNodeRef } =\n        useSortable({\n            id,\n            disabled: !draggable,\n            data: { type, accepts, parentId, level },\n            animateLayoutChanges,\n            transition: null,\n        });\n\n    useLayoutEffect(() => {\n        if (Children.count(enrichedChildren) === 0) {\n            return;\n        }\n\n        if (!isAncestorMounted || !isParentExpanded || isActive || isParentActive) {\n            unregisterNodeChildren(enrichedChildren);\n            return;\n        }\n\n        if (isExpanded) {\n            registerNodeChildren({ id: enrichedChildren[0].props.parentId, children: enrichedChildren });\n        } else {\n            unregisterNodeChildren(enrichedChildren);\n        }\n    }, [\n        isActive,\n        isExpanded,\n        isParentActive,\n        isParentExpanded,\n        isAncestorMounted,\n        enrichedChildren,\n        registerNodeChildren,\n        unregisterNodeChildren,\n    ]);\n\n    const handleSelect = useCallback(\n        (event: MouseEvent<HTMLElement, globalThis.MouseEvent>) => {\n            event.stopPropagation();\n\n            onSelect(id);\n        },\n        [id, onSelect],\n    );\n\n    const handleExpand = (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => {\n        event.stopPropagation();\n\n        onExpand(id);\n    };\n\n    const liClassName = useMemo(\n        () =>\n            merge([\n                FOCUS_VISIBLE_STYLE,\n                !isActive && !isSelected && 'focus-within:tw-bg-box-neutral',\n                'tw-outline-none tw-ring-inset tw-group tw-px-2.5 tw-no-underline tw-leading-5 tw-h-10',\n                isSelected && !transform?.y\n                    ? 'tw-font-medium tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover'\n                    : 'hover:tw-bg-box-neutral tw-text-text',\n                transform?.y ? 'tw-bg-box-neutral-strong-inverse tw-text-text tw-font-normal' : '',\n            ]),\n        [isActive, isSelected, transform],\n    );\n\n    const containerClassName = merge([\n        'tw-flex tw-items-center tw-h-10 tw-leading-5 tw-width-full',\n        isActive && 'tw-border-box-selected-strong tw-border-dashed tw-border-2 tw-bg-box-selected-hover',\n        isActive &&\n            ((isWithin && !((movingDown && canDropWithinMovingDown) || (movingUp && canDropWithinMovingUp))) ||\n                (!isWithin && !canDrop)) &&\n            'tw-bg-box-negative-hover tw-border-box-negative-strong-hover tw-border-dashed tw-border-2',\n    ]);\n\n    const depthPadding = projection?.depth ? projection.depth * INDENTATION_WIDTH : undefined;\n    const levelPadding = isActive ? 0 : level * INDENTATION_WIDTH;\n\n    const liStyle = {\n        paddingLeft: depthPadding ?? levelPadding,\n    };\n\n    const showContent = !isActive;\n    const showChildren = isExpanded && !isActive;\n    const showDragHandle = draggable && !isActive;\n    const showLabel = label !== undefined && !isActive;\n    const showExpandButton = hasChildren && !isActive;\n\n    const animate = {\n        x: transform?.x,\n        y: transform?.y,\n    };\n\n    return (\n        <li\n            key={id}\n            tabIndex={0}\n            role=\"treeitem\"\n            style={liStyle}\n            id={id.toString()}\n            aria-label={label}\n            aria-level={level}\n            onClick={handleSelect}\n            className={liClassName}\n            ref={setDroppableNodeRef}\n            data-test-id={dataTestId}\n            aria-selected={isSelected}\n            aria-expanded={isExpanded}\n            data-has-children={hasChildren}\n            aria-owns={childrenIds.join(' ')}\n            onKeyDown={noop}\n        >\n            <motion.div\n                transition={{\n                    bounce: 0,\n                    delay: 0,\n                    duration: 0,\n                }}\n                ref={setDraggableNodeRef}\n                className={containerClassName}\n                animate={transform ? animate : undefined}\n            >\n                {showDragHandle ? (\n                    <DragHandle ref={setActivatorNodeRef} active={isSelected} {...listeners} {...attributes} />\n                ) : (\n                    <div className=\"tw-w-5 tw-ml-2 tw-min-w-[20px]\" />\n                )}\n\n                <ExpandButton\n                    onClick={handleExpand}\n                    expanded={showChildren}\n                    disabled={!showExpandButton}\n                    active={transform?.y ? false : isSelected}\n                />\n\n                {showLabel ? (\n                    <span className=\"first:tw-ml-3.5 tw-w-full tw-h-full tw-flex tw-items-center\">{label}</span>\n                ) : null}\n\n                {showContent && contentComponent}\n            </motion.div>\n        </li>\n    );\n};\n\nTreeItem.displayName = 'FondueTreeItem';\n"],"names":["animateLayoutChanges","isSorting","wasDragging","TreeItem","id","type","label","onDrop","accepts","children","parentId","level","contentComponent","itemDraggable","dataTestId","onExpand","onSelect","treeState","registerOverlay","registerNodeChildren","unregisterNodeChildren","treeDraggable","useTreeContext","active","over","useDndContext","draggable","isActive","activeIndex","props","overIndex","movingDown","movingUp","projection","useMemo","projectionNode","isWithin","_a","canDrop","canDropWithinMovingDown","_b","canDropWithinMovingUp","handleItemDragEnd","event","sortOver","getItemPositionInParent","sortActive","position","_e","handleItemDragStart","useCallback","useDndMonitor","isSelected","isExpanded","isParentRoot","ROOT_ID","isParentActive","isParentExpanded","isAncestorMounted","node","hasChildren","Children","enrichedChildren","removeFragmentsAndEnrichChildren","childrenIds","child","attributes","listeners","transform","setDraggableNodeRef","setDroppableNodeRef","setActivatorNodeRef","useSortable","useLayoutEffect","handleSelect","handleExpand","liClassName","merge","FOCUS_VISIBLE_STYLE","containerClassName","depthPadding","INDENTATION_WIDTH","levelPadding","liStyle","showContent","showChildren","showDragHandle","showLabel","showExpandButton","animate","React","noop","motion","DragHandle","ExpandButton"],"mappings":"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"}

package/dist/components/Tree/types.d.ts

@@ -31,6 +31,7 @@ type TreeItemBaseProps = {
     onDrop?: OnDropCallback<{
         id: string;
         sort: number;
+        parentId: string;
     }>;
     /**
      * The type of item being dragged.