npm - @frontify/fondue - Versions diffs - 12.0.0-beta.140 → 12.0.0-beta.142 - Mend

@frontify/fondue 12.0.0-beta.140 → 12.0.0-beta.142

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

Files changed (10) hide show

package/dist/components/InputLabel/InputLabel.es.js +23 -30
package/dist/components/InputLabel/InputLabel.es.js.map +1 -1
package/dist/components/Tree/TreeItem.es.js +25 -25
package/dist/components/Tree/TreeItem.es.js.map +1 -1
package/dist/index.cjs.js +2 -2
package/dist/index.cjs.js.map +1 -1
package/dist/index.umd.js +2 -2
package/dist/index.umd.js.map +1 -1
package/dist/styles.css +1 -1
package/package.json +1 -1

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

@@ -1,64 +1,57 @@
 import { TooltipIcon as f } from "../TooltipIcon/TooltipIcon.es.js";
-import { IconSize as k } from "../../foundation/Icon/IconSize.es.js";
-import { merge as i } from "../../utilities/merge.es.js";
+import { IconSize as u } from "../../foundation/Icon/IconSize.es.js";
+import { merge as o } from "../../utilities/merge.es.js";
 import t from "react";
-const u = ({
+const v = ({
   children: e,
-  htmlFor: w,
-  required: n = !1,
-  disabled: o = !1,
-  clickable: s = !1,
+  htmlFor: r,
+  required: s = !1,
+  disabled: n = !1,
+  clickable: w = !1,
   tooltip: a = [],
-  bold: c
+  bold: m
 }) => {
-  const m = (Array.isArray(a) ? a : [a]).map((r, l) => ({
+  const p = (Array.isArray(a) ? a : [a]).map((i, l) => ({
     key: l,
-    ...r
+    ...i
   }));
   return /* @__PURE__ */ t.createElement(
     "div",
     {
-      className: i([
+      className: o([
         "tw-inline-flex tw-leading-4 tw-items-center tw-gap-1 tw-font-sans tw-text-s tw-max-w-full tw-min-w-0 tw-flex-initial",
-        o ? "tw-text-black-40 hover:tw-text-black-40 dark:tw-text-black-60 dark:hover:tw-text-black-60" : "tw-text-black-90 dark:tw-text-white"
+        n ? "tw-text-disabled" : "tw-text-text-weak"
       ]),
       "data-test-id": "input-label-container"
     },
     /* @__PURE__ */ t.createElement("div", { className: "tw-flex-1 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap" }, /* @__PURE__ */ t.createElement(
       "label",
       {
-        htmlFor: w,
-        className: i([
+        htmlFor: r,
+        className: o([
           "tw-select-none",
-          c && "tw-font-medium",
-          o || !s ? "hover:tw-cursor-not-allowed tw-pointer-events-none" : "hover:tw-cursor-pointer hover:tw-text-black dark:hover:tw-text-white group-hover:tw-text-black dark:group-hover:tw-text-white"
+          m && "tw-font-medium",
+          n || !w ? "hover:tw-cursor-not-allowed tw-pointer-events-none" : "hover:tw-cursor-pointer hover:tw-text-text group-hover:tw-text-text"
         ]),
         "data-test-id": "input-label",
         title: typeof e == "string" ? e : ""
       },
       e
     )),
-    n && /* @__PURE__ */ t.createElement(
-      "span",
-      {
-        "data-test-id": "input-label-required",
-        className: "tw-h-4 tw-text-m tw-text-red-60 dark:tw-text-red-50"
-      },
-      "*"
-    ),
-    m.map(({ key: r, triggerIcon: l, triggerStyle: p, hoverDelay: d = 100, ...x }) => /* @__PURE__ */ t.createElement("div", { key: r, className: "tw-leading-3" }, /* @__PURE__ */ t.createElement(
+    s && /* @__PURE__ */ t.createElement("span", { "data-test-id": "input-label-required", className: "tw-h-4 tw-text-m tw-text-text-negative" }, "*"),
+    p.map(({ key: i, triggerIcon: l, triggerStyle: c, hoverDelay: x = 100, ...d }) => /* @__PURE__ */ t.createElement("div", { key: i, className: "tw-leading-3" }, /* @__PURE__ */ t.createElement(
       f,
       {
-        tooltip: { ...x, hoverDelay: d },
-        iconSize: k.Size16,
+        tooltip: { ...d, hoverDelay: x },
+        iconSize: u.Size16,
         triggerIcon: l,
-        triggerStyle: p
+        triggerStyle: c
       }
     )))
   );
 };
-u.displayName = "FondueInputLabel";
+v.displayName = "FondueInputLabel";
 export {
-  u as InputLabel
+  v as InputLabel
 };
 //# sourceMappingURL=InputLabel.es.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InputLabel.es.js","sources":["../../../src/components/InputLabel/InputLabel.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { TooltipProps } from '@components/Tooltip/Tooltip';\nimport { TooltipIcon, TooltipIconProps } from '@components/TooltipIcon/TooltipIcon';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { merge } from '@utilities/merge';\nimport React, { FC, PropsWithChildren } from 'react';\n\nexport type InputLabelTooltipProps =\n \| (TooltipProps & Pick<TooltipIconProps, 'triggerStyle' \| 'triggerIcon'>)\n \| (TooltipProps & Pick<TooltipIconProps, 'triggerStyle' \| 'triggerIcon'>)[];\n\nexport type InputLabelProps = PropsWithChildren<{\n htmlFor: string;\n required?: boolean;\n disabled?: boolean;\n clickable?: boolean;\n tooltip?: InputLabelTooltipProps;\n bold?: boolean;\n}>;\n\nexport const InputLabel: FC<InputLabelProps> = ({\n children,\n htmlFor,\n required = false,\n disabled = false,\n clickable = false,\n tooltip = [],\n bold,\n}) => {\n const tooltips = Array.isArray(tooltip) ? tooltip : [tooltip];\n\n const tooltipsWithKeys = tooltips.map((tooltip, index) => ({\n key: index,\n ...tooltip,\n }));\n\n return (\n <div\n className={merge([\n 'tw-inline-flex tw-leading-4 tw-items-center tw-gap-1 tw-font-sans tw-text-s tw-max-w-full tw-min-w-0 tw-flex-initial',\n disabled\n ? 'tw-text-~~black-40~~ ~~hover~~:~~tw-text-black-40~~ ~~dark:tw-text-black-60 dark:hover:tw-text-black-60~~'~~\n : '~~tw-text-~~black-90 dark:tw-~~text-~~white~~',\n ])}\n data-test-id=\"input-label-container\"\n >\n <div className=\"tw-flex-1 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap\">\n <label\n htmlFor={htmlFor}\n className={merge([\n 'tw-select-none',\n bold && 'tw-font-medium',\n disabled \|\| !clickable\n ? 'hover:tw-cursor-not-allowed tw-pointer-events-none'\n : 'hover:tw-cursor-pointer hover:tw-text-~~black dark:hover:tw-~~text~~-white~~ group-hover:tw-text-~~black dark:group-hover:tw-~~text~~-white~~',\n ])}\n data-test-id=\"input-label\"\n title={typeof children === 'string' ? children : ''}\n >\n {children}\n </label>\n </div>\n\n {required && (\n <span\n data-test-id=\"input-label-required\"\n className=\"tw-h-4 tw-text-m tw-text-~~red-60 dark:tw-~~text-~~red-50~~\"\n >\n \n </span>\n )}\n {tooltipsWithKeys.map(({ key, triggerIcon, triggerStyle, hoverDelay = 100, ...tooltipProps }) => (\n <div key={key} className=\"tw-leading-3\">\n <TooltipIcon\n tooltip={{ ...tooltipProps, hoverDelay }}\n iconSize={IconSize.Size16}\n triggerIcon={triggerIcon}\n triggerStyle={triggerStyle}\n />\n </div>\n ))}\n </div>\n );\n};\nInputLabel.displayName = 'FondueInputLabel';\n"],"names":["InputLabel","children","htmlFor","required","disabled","clickable","tooltip","bold","tooltipsWithKeys","index","React","merge","key","triggerIcon","triggerStyle","hoverDelay","tooltipProps","TooltipIcon","IconSize"],"mappings":";;;;AAqBO,MAAMA,IAAkC,CAAC;AAAA,EAC5C,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU,CAAC;AAAA,EACX,MAAAC;AACJ,MAAM;AAGF,QAAMC,KAFW,MAAM,QAAQF,CAAO,IAAIA,IAAU,CAACA,CAAO,GAE1B,IAAI,CAACA,GAASG,OAAW;AAAA,IACvD,KAAKA;AAAA,IACL,GAAGH;AAAAA,EACL,EAAA;AAGE,SAAA,gBAAAI,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAM;AAAA,QACb;AAAA,QACAP,~~IACM~~,~~8FACA~~;AAAA,MAAA,~~CACT~~;AAAA,MACD,gBAAa;AAAA,IAAA;AAAA,IAEb,gBAAAM,EAAA,cAAC,OAAI,EAAA,WAAU,qEACX,GAAA,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,SAAAR;AAAA,QACA,WAAWS,EAAM;AAAA,UACb;AAAA,UACAJ,KAAQ;AAAA,UACRH,KAAY,CAACC,IACP,uDACA;AAAA,QAAA,CACT;AAAA,QACD,gBAAa;AAAA,QACb,OAAO,OAAOJ,KAAa,WAAWA,IAAW;AAAA,MAAA;AAAA,MAEhDA;AAAA,IAAA,CAET;AAAA,IAECE,~~KACG~~,gBAAAO,EAAA~~;AAAA~~,~~MAAC;AAAA~~,~~MAAA;AAAA~~,~~QACG~~,gBAAa~~;AAAA~~,~~QACb~~,WAAU~~;AAAA~~,~~MAAA;AAAA~~,~~MACb~~;AAAA,~~IAED;AAAA,~~IAEHF,EAAiB,IAAI,CAAC,EAAE,KAAAI,GAAK,aAAAC,GAAa,cAAAC,GAAc,YAAAC,IAAa,KAAK,GAAGC,EAC1E,MAAA,gBAAAN,EAAA,cAAC,OAAI,EAAA,KAAAE,GAAU,WAAU,eACrB,GAAA,gBAAAF,EAAA;AAAA,MAACO;AAAA,MAAA;AAAA,QACG,SAAS,EAAE,GAAGD,GAAc,YAAAD,EAAW;AAAA,QACvC,UAAUG,EAAS;AAAA,QACnB,aAAAL;AAAA,QACA,cAAAC;AAAA,MAAA;AAAA,IAAA,CAER,CACH;AAAA,EAAA;AAGb;AACAd,EAAW,cAAc;"}
1	+ {"version":3,"file":"InputLabel.es.js","sources":["../../../src/components/InputLabel/InputLabel.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { TooltipProps } from '@components/Tooltip/Tooltip';\nimport { TooltipIcon, TooltipIconProps } from '@components/TooltipIcon/TooltipIcon';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { merge } from '@utilities/merge';\nimport React, { FC, PropsWithChildren } from 'react';\n\nexport type InputLabelTooltipProps =\n \| (TooltipProps & Pick<TooltipIconProps, 'triggerStyle' \| 'triggerIcon'>)\n \| (TooltipProps & Pick<TooltipIconProps, 'triggerStyle' \| 'triggerIcon'>)[];\n\nexport type InputLabelProps = PropsWithChildren<{\n htmlFor: string;\n required?: boolean;\n disabled?: boolean;\n clickable?: boolean;\n tooltip?: InputLabelTooltipProps;\n bold?: boolean;\n}>;\n\nexport const InputLabel: FC<InputLabelProps> = ({\n children,\n htmlFor,\n required = false,\n disabled = false,\n clickable = false,\n tooltip = [],\n bold,\n}) => {\n const tooltips = Array.isArray(tooltip) ? tooltip : [tooltip];\n\n const tooltipsWithKeys = tooltips.map((tooltip, index) => ({\n key: index,\n ...tooltip,\n }));\n\n return (\n <div\n className={merge([\n 'tw-inline-flex tw-leading-4 tw-items-center tw-gap-1 tw-font-sans tw-text-s tw-max-w-full tw-min-w-0 tw-flex-initial',\n disabled ? 'tw-text-disabled' : 'tw-text-text-weak',\n ])}\n data-test-id=\"input-label-container\"\n >\n <div className=\"tw-flex-1 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap\">\n <label\n htmlFor={htmlFor}\n className={merge([\n 'tw-select-none',\n bold && 'tw-font-medium',\n disabled \|\| !clickable\n ? 'hover:tw-cursor-not-allowed tw-pointer-events-none'\n : 'hover:tw-cursor-pointer hover:tw-text-text group-hover:tw-text-text',\n ])}\n data-test-id=\"input-label\"\n title={typeof children === 'string' ? children : ''}\n >\n {children}\n </label>\n </div>\n\n {required && (\n <span data-test-id=\"input-label-required\" className=\"tw-h-4 tw-text-m tw-text-text-negative\">\n \n </span>\n )}\n {tooltipsWithKeys.map(({ key, triggerIcon, triggerStyle, hoverDelay = 100, ...tooltipProps }) => (\n <div key={key} className=\"tw-leading-3\">\n <TooltipIcon\n tooltip={{ ...tooltipProps, hoverDelay }}\n iconSize={IconSize.Size16}\n triggerIcon={triggerIcon}\n triggerStyle={triggerStyle}\n />\n </div>\n ))}\n </div>\n );\n};\nInputLabel.displayName = 'FondueInputLabel';\n"],"names":["InputLabel","children","htmlFor","required","disabled","clickable","tooltip","bold","tooltipsWithKeys","index","React","merge","key","triggerIcon","triggerStyle","hoverDelay","tooltipProps","TooltipIcon","IconSize"],"mappings":";;;;AAqBO,MAAMA,IAAkC,CAAC;AAAA,EAC5C,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU,CAAC;AAAA,EACX,MAAAC;AACJ,MAAM;AAGF,QAAMC,KAFW,MAAM,QAAQF,CAAO,IAAIA,IAAU,CAACA,CAAO,GAE1B,IAAI,CAACA,GAASG,OAAW;AAAA,IACvD,KAAKA;AAAA,IACL,GAAGH;AAAAA,EACL,EAAA;AAGE,SAAA,gBAAAI,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAM;AAAA,QACb;AAAA,QACAP,IAAW,qBAAqB;AAAA,MAAA,CACnC;AAAA,MACD,gBAAa;AAAA,IAAA;AAAA,IAEb,gBAAAM,EAAA,cAAC,OAAI,EAAA,WAAU,qEACX,GAAA,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,SAAAR;AAAA,QACA,WAAWS,EAAM;AAAA,UACb;AAAA,UACAJ,KAAQ;AAAA,UACRH,KAAY,CAACC,IACP,uDACA;AAAA,QAAA,CACT;AAAA,QACD,gBAAa;AAAA,QACb,OAAO,OAAOJ,KAAa,WAAWA,IAAW;AAAA,MAAA;AAAA,MAEhDA;AAAA,IAAA,CAET;AAAA,IAECE,KACI,gBAAAO,EAAA,cAAA,QAAA,EAAK,gBAAa,wBAAuB,WAAU,4CAAyC,GAE7F;AAAA,IAEHF,EAAiB,IAAI,CAAC,EAAE,KAAAI,GAAK,aAAAC,GAAa,cAAAC,GAAc,YAAAC,IAAa,KAAK,GAAGC,EAC1E,MAAA,gBAAAN,EAAA,cAAC,OAAI,EAAA,KAAAE,GAAU,WAAU,eACrB,GAAA,gBAAAF,EAAA;AAAA,MAACO;AAAA,MAAA;AAAA,QACG,SAAS,EAAE,GAAGD,GAAc,YAAAD,EAAW;AAAA,QACvC,UAAUG,EAAS;AAAA,QACnB,aAAAL;AAAA,QACA,cAAAC;AAAA,MAAA;AAAA,IAAA,CAER,CACH;AAAA,EAAA;AAGb;AACAd,EAAW,cAAc;"}

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

@@ -2,8 +2,8 @@ import o, { useRef as ee, useState as te, useCallback as i, useMemo as U, useEff
 import { useDrag as ne } from "react-dnd";
 import { merge as Y } from "../../utilities/merge.es.js";
 import { useTreeContext as oe } from "./TreeContext.es.js";
-import { FOCUS_VISIBLE_STYLE as se } from "../../utilities/focusStyle.es.js";
-import { DEFAULT_TREE_ITEM_PADDING as ae } from "./utils/defaultValues.es.js";
+import { FOCUS_VISIBLE_STYLE as ae } from "../../utilities/focusStyle.es.js";
+import { DEFAULT_TREE_ITEM_PADDING as se } from "./utils/defaultValues.es.js";
 import { getItemPositionInParent as le } from "./helpers/getItemPositionInParent.es.js";
 import { isDescendant as de } from "./utils/isInsideOfElement.es.js";
 import { getNextItemToFocus as ce } from "./helpers/getNextItemToFocus.es.js";
@@ -27,16 +27,16 @@ const fe = 0.4, we = 1, ge = ({
 }) => {
   const {
     treeId: E,
-    draggable: W,
+    draggable: z,
     onSelect: w,
-    onExpand: a,
+    onExpand: s,
     onDrop: L,
     registerTreeItem: P,
     registerTreeItemChildren: N,
     unregisterTreeItem: C,
     treeState: n,
     baseItemPadding: b
-  } = oe(), t = n.items.get(e), l = ee(null), [Z, R] = te(!1), z = i(() => R(!0), []), H = i(() => R(!1), []), g = U(
+  } = oe(), t = n.items.get(e), l = ee(null), [W, R] = te(!1), Z = i(() => R(!0), []), H = i(() => R(!1), []), g = U(
     () => t != null && t.parentId ? le(e, t.parentId, n) : -1,
     [e, t == null ? void 0 : t.parentId, n]
   );
@@ -61,7 +61,7 @@ const fe = 0.4, we = 1, ge = ({
       isDragging: r.isDragging()
     }),
     type: p ?? E,
-    canDrag: j ?? W
+    canDrag: j ?? z
   }), T = i(
     (r, d, u) => {
       L(r, d, u), h == null || h(r, d, u);
@@ -74,14 +74,14 @@ const fe = 0.4, we = 1, ge = ({
     [e, w]
   ), Q = i(
     (r) => {
-      r.stopPropagation(), a(e, !n.expandedIds.has(e));
+      r.stopPropagation(), s(e, !n.expandedIds.has(e));
     },
-    [e, a, n.expandedIds]
+    [e, s, n.expandedIds]
   ), X = i(
     (r) => {
-      document.activeElement === l.current && (r.key === "Space" || r.key === "Enter") && (r.stopPropagation(), a(e, !n.expandedIds.has(e)));
+      document.activeElement === l.current && (r.key === "Space" || r.key === "Enter") && (r.stopPropagation(), s(e, !n.expandedIds.has(e)));
     },
-    [e, a, n.expandedIds]
+    [e, s, n.expandedIds]
   ), $ = i(
     (r) => {
       var d, u, F, G, K;
@@ -91,43 +91,43 @@ const fe = 0.4, we = 1, ge = ({
             r.preventDefault(), w(e);
             break;
           case "Space":
-            r.preventDefault(), t != null && t.childrenIds ? a(e, !n.expandedIds.has(e)) : w(e);
+            r.preventDefault(), t != null && t.childrenIds ? s(e, !n.expandedIds.has(e)) : w(e);
             break;
           case "ArrowRight":
             if (r.preventDefault(), t != null && t.childrenIds && !n.expandedIds.has(e))
-              a(e, !0);
+              s(e, !0);
             else if ((d = t == null ? void 0 : t.childrenIds) != null && d[0]) {
-              const s = t.childrenIds[0], c = n.items.get(s);
+              const a = t.childrenIds[0], c = n.items.get(a);
               (u = c == null ? void 0 : c.domElement) == null || u.focus();
             }
             break;
           case "ArrowLeft":
             if (r.preventDefault(), t != null && t.childrenIds && n.expandedIds.has(e))
-              a(e, !1);
+              s(e, !1);
             else if (t != null && t.parentId) {
-              const s = t.parentId, c = n.items.get(s);
+              const a = t.parentId, c = n.items.get(a);
               (F = c == null ? void 0 : c.domElement) == null || F.focus();
             }
             break;
           case "ArrowUp":
             if (r.preventDefault(), t) {
-              const s = ie(e, t, n);
-              (G = s == null ? void 0 : s.domElement) == null || G.focus();
+              const a = ie(e, t, n);
+              (G = a == null ? void 0 : a.domElement) == null || G.focus();
             }
             break;
           case "ArrowDown":
             if (r.preventDefault(), t) {
-              const s = ce(e, t, n);
-              (K = s == null ? void 0 : s.domElement) == null || K.focus();
+              const a = ce(e, t, n);
+              (K = a == null ? void 0 : a.domElement) == null || K.focus();
             }
             break;
         }
     },
-    [e, a, w, t, n]
+    [e, s, w, t, n]
   ), _ = U(
     () => f ? pe(f, { parentId: e, level: (x || 0) + 1 }) : [],
     [f, e, x]
-  ), S = re.count(_) > 0, M = ((t == null ? void 0 : t.level) ?? 0) * 16 + b.left, B = M - ae.left;
+  ), S = re.count(_) > 0, M = ((t == null ? void 0 : t.level) ?? 0) * 16 + b.left, B = M - se.left;
   return /* @__PURE__ */ o.createElement("li", { "data-test-id": "tree-item", ref: q, style: { opacity: V, transform: "translate3d(0, 0, 0)" } }, g === 0 ? /* @__PURE__ */ o.createElement(
     "div",
     {
@@ -163,8 +163,8 @@ const fe = 0.4, we = 1, ge = ({
       {
         className: Y([
           n.selectedIds.has(e) ? "tw-font-medium tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover hover:tw-text-box-neutral-strong-inverse-hover" : "tw-text-text hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover",
-          se,
-          "tw-leading-5 tw-no-underline tw-flex"
+          ae,
+          "tw-relative tw-z-30 tw-leading-5 tw-no-underline tw-flex"
         ]),
         "data-test-id": "tree-item-content",
         style: {
@@ -182,7 +182,7 @@ const fe = 0.4, we = 1, ge = ({
         tabIndex: 0,
         onClick: J,
         onKeyDown: $,
-        onMouseEnter: z,
+        onMouseEnter: Z,
         onMouseLeave: H
       },
       /* @__PURE__ */ o.createElement("div", { className: "tw-flex tw-flex-1 tw-space-x-1 tw-items-center tw-h-6 tw-min-w-0" }, /* @__PURE__ */ o.createElement("div", { className: "tw-w-2 tw-h-3 tw-flex tw-items-center tw-justify-center" }, S && /* @__PURE__ */ o.createElement(
@@ -204,7 +204,7 @@ const fe = 0.4, we = 1, ge = ({
             ])
           }
         )
-      )), I ? /* @__PURE__ */ o.createElement("span", null, I) : null, v == null ? void 0 : v({ selected: n.selectedIds.has(e) ?? !1, hovered: Z }))
+      )), I ? /* @__PURE__ */ o.createElement("span", null, I) : null, v == null ? void 0 : v({ selected: n.selectedIds.has(e) ?? !1, hovered: W }))
     )
   ), n.expandedIds.has(e) ? /* @__PURE__ */ o.createElement(
     "ul",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TreeItem.es.js","sources":["../../../src/components/Tree/TreeItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport React, { Children, KeyboardEvent, MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useDrag } from 'react-dnd';\n\nimport { merge } from '@utilities/merge';\nimport { DraggableItem, DropZonePosition } from '@utilities/dnd';\n\nimport { DropZone } from '@components/DropZone';\nimport type { TreeItemProps } from '@components/Tree/types';\nimport { useTreeContext } from '@components/Tree/TreeContext';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\n\nimport { getAcceptTypes, getItemPositionInParent, getNextItemToFocus, getPreviousItemToFocus } from './helpers';\nimport { cloneThroughFragments, flattenChildren, isDescendant } from './utils';\nimport { DEFAULT_TREE_ITEM_PADDING } from './utils/defaultValues';\n\nconst DRAGGING_OPACITY = 0.4;\nconst DEFAULT_OPACITY = 1;\n\nexport const TreeItem = ({\n id,\n parentId,\n label,\n draggable: propsDraggable,\n contentComponent,\n onDrop,\n type,\n accepts,\n children,\n level,\n}: TreeItemProps) => {\n const {\n treeId,\n draggable,\n onSelect,\n onExpand,\n onDrop: onTreeDrop,\n registerTreeItem,\n registerTreeItemChildren,\n unregisterTreeItem,\n treeState,\n baseItemPadding,\n } = useTreeContext();\n\n const treeItemState = treeState.items.get(id);\n const itemRef = useRef<HTMLDivElement>(null);\n\n const [hovered, setHovered] = useState<boolean>(false);\n const handleMouseEnter = useCallback(() => setHovered(true), []);\n const handleMouseLeave = useCallback(() => setHovered(false), []);\n\n const sort = useMemo(\n () => (treeItemState?.parentId ? getItemPositionInParent(id, treeItemState.parentId, treeState) : -1),\n [id, treeItemState?.parentId, treeState],\n );\n\n useEffect(() => {\n if (itemRef.current) {\n registerTreeItem({\n id,\n parentId,\n level: level ?? 0,\n domElement: itemRef.current,\n });\n\n return () => {\n unregisterTreeItem(id);\n };\n }\n }, [id, level, parentId, registerTreeItem, unregisterTreeItem, itemRef]);\n\n useEffect(() => {\n const childrenIds = flattenChildren(children).map((child) => child.props.id);\n registerTreeItemChildren({ id, childrenIds: childrenIds.length > 0 ? childrenIds : undefined });\n }, [children, id, registerTreeItemChildren]);\n\n const [{ opacity }, drag] = useDrag({\n item: { id, type, sort },\n collect: (monitor) => ({\n opacity: monitor.isDragging() ? DRAGGING_OPACITY : DEFAULT_OPACITY,\n isDragging: monitor.isDragging(),\n }),\n type: type ?? treeId,\n canDrag: propsDraggable ?? draggable,\n });\n\n const handleDrop = useCallback(\n (\n targetItem: DraggableItem<{ id: string; sort: number }>,\n sourceItem: DraggableItem<{ id: string; sort: number }>,\n position: DropZonePosition,\n ) => {\n onTreeDrop(targetItem, sourceItem, position);\n onDrop?.(targetItem, sourceItem, position);\n },\n [onDrop, onTreeDrop],\n );\n\n const handleSelect = useCallback(\n (event: MouseEvent<HTMLDivElement>) => {\n if (itemRef.current && isDescendant(event.target as HTMLElement, itemRef.current)) {\n event.stopPropagation();\n onSelect(id);\n }\n },\n [id, onSelect],\n );\n\n const handleExpandClick = useCallback(\n (event: MouseEvent) => {\n event.stopPropagation();\n onExpand(id, !treeState.expandedIds.has(id));\n },\n [id, onExpand, treeState.expandedIds],\n );\n\n const handleExpandKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (document.activeElement === itemRef.current && (event.key === 'Space' \|\| event.key === 'Enter')) {\n event.stopPropagation();\n onExpand(id, !treeState.expandedIds.has(id));\n }\n },\n [id, onExpand, treeState.expandedIds],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (document.activeElement === itemRef.current) {\n switch (event.code) {\n case 'Enter':\n event.preventDefault();\n onSelect(id);\n break;\n\n case 'Space':\n event.preventDefault();\n if (treeItemState?.childrenIds) {\n onExpand(id, !treeState.expandedIds.has(id));\n } else {\n onSelect(id);\n }\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n if (treeItemState?.childrenIds && !treeState.expandedIds.has(id)) {\n onExpand(id, true);\n } else if (treeItemState?.childrenIds?.[0]) {\n const firstChildId = treeItemState.childrenIds[0];\n const firstChildState = treeState.items.get(firstChildId);\n firstChildState?.domElement?.focus();\n }\n break;\n\n case 'ArrowLeft':\n event.preventDefault();\n if (treeItemState?.childrenIds && treeState.expandedIds.has(id)) {\n onExpand(id, false);\n } else if (treeItemState?.parentId) {\n const parentId = treeItemState.parentId;\n const parentState = treeState.items.get(parentId);\n parentState?.domElement?.focus();\n }\n break;\n\n case 'ArrowUp':\n event.preventDefault();\n if (treeItemState) {\n const previousItemToFocus = getPreviousItemToFocus(id, treeItemState, treeState);\n previousItemToFocus?.domElement?.focus();\n }\n break;\n\n case 'ArrowDown':\n event.preventDefault();\n if (treeItemState) {\n const nextItemToFocus = getNextItemToFocus(id, treeItemState, treeState);\n nextItemToFocus?.domElement?.focus();\n }\n break;\n }\n }\n },\n [id, onExpand, onSelect, treeItemState, treeState],\n );\n\n const enhancedChildren = useMemo(\n () => (children ? cloneThroughFragments(children, { parentId: id, level: (level \|\| 0) + 1 }) : []),\n [children, id, level],\n );\n\n const hasChildren = Children.count(enhancedChildren) > 0;\n\n const paddingLeftByLevel = (treeItemState?.level ?? 0) 16 + baseItemPadding.left;\n // Dropzone positioning is matched with existing styles from before https://github.com/Frontify/fondue/pull/1270\n const dropzonePadding = paddingLeftByLevel - DEFAULT_TREE_ITEM_PADDING.left;\n\n return (\n <li data-test-id=\"tree-item\" ref={drag} style={{ opacity, transform: 'translate3d(0, 0, 0)' }}>\n {sort === 0 ? (\n <div\n style={{\n paddingLeft: dropzonePadding,\n }}\n >\n <DropZone\n data-position={DropZonePosition.Before}\n data={{\n targetItem: { id, sort: sort ?? 0, type },\n position: DropZonePosition.Before,\n }}\n onDrop={handleDrop}\n accept={getAcceptTypes(accepts ?? treeId, 'before')}\n />\n </div>\n ) : null}\n\n <DropZone\n data-position={DropZonePosition.Within}\n data={{\n targetItem: { id, sort: sort ?? 0, type },\n position: DropZonePosition.Within,\n }}\n onDrop={handleDrop}\n accept={getAcceptTypes(accepts ?? treeId, 'within')}\n >\n <div\n className={merge([\n treeState.selectedIds.has(id)\n ? 'tw-font-medium tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover hover:tw-text-box-neutral-strong-inverse-hover'\n : 'tw-text-text hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n FOCUS_VISIBLE_STYLE,\n 'tw-leading-5 tw-no-underline tw-flex',\n ])}\n data-test-id=\"tree-item-content\"\n style={{\n paddingLeft: paddingLeftByLevel,\n paddingRight: baseItemPadding.right,\n paddingTop: baseItemPadding.top,\n paddingBottom: baseItemPadding.bottom,\n }}\n ref={itemRef}\n role=\"treeitem\"\n aria-label={label}\n aria-level={treeItemState?.level}\n aria-selected={treeState.selectedIds.has(id)}\n aria-expanded={treeState.expandedIds.has(id)}\n tabIndex={0}\n onClick={handleSelect}\n onKeyDown={handleKeyDown}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n <div className=\"tw-flex tw-flex-1 tw-space-x-1 tw-items-center tw-h-6 tw-min-w-0\">\n <div className=\"tw-w-2 tw-h-3 tw-flex tw-items-center tw-justify-center\">\n {hasChildren && (\n <button\n data-test-id=\"tree-item-toggle\"\n className=\"tw-flex tw-items-center tw-justify-center tw-p-1.5 tw-cursor-pointer\"\n onClick={handleExpandClick}\n onKeyDown={handleExpandKeyDown}\n tabIndex={0}\n >\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 treeState.selectedIds.has(id) && 'tw-text-box-selected-strong-inverse',\n treeState.expandedIds.has(id) && 'tw-rotate-90',\n ])}\n />\n </button>\n )}\n </div>\n\n {label ? <span>{label}</span> : null}\n\n {contentComponent?.({ selected: treeState.selectedIds.has(id) ?? false, hovered })}\n </div>\n </div>\n </DropZone>\n\n {treeState.expandedIds.has(id) ? (\n <ul\n className=\"tw-p-0 tw-m-0 tw-list-none tw-font-sans tw-font-normal tw-text-left\"\n data-test-id=\"sub-tree-items\"\n >\n {enhancedChildren}\n </ul>\n ) : null}\n\n <div\n style={{\n paddingLeft: dropzonePadding,\n }}\n >\n <DropZone\n data-position={DropZonePosition.After}\n data={{\n targetItem: { id, sort: sort ?? 0, type },\n position: DropZonePosition.After,\n }}\n onDrop={handleDrop}\n accept={getAcceptTypes(accepts ?? treeId, 'after')}\n />\n </div>\n </li>\n );\n};\nTreeItem.displayName = 'FondueTreeItem';\n"],"names":["DRAGGING_OPACITY","DEFAULT_OPACITY","TreeItem","id","parentId","label","propsDraggable","contentComponent","onDrop","type","accepts","children","level","treeId","draggable","onSelect","onExpand","onTreeDrop","registerTreeItem","registerTreeItemChildren","unregisterTreeItem","treeState","baseItemPadding","useTreeContext","treeItemState","itemRef","useRef","hovered","setHovered","useState","handleMouseEnter","useCallback","handleMouseLeave","sort","useMemo","getItemPositionInParent","useEffect","childrenIds","flattenChildren","child","opacity","drag","useDrag","monitor","handleDrop","targetItem","sourceItem","position","handleSelect","event","isDescendant","handleExpandClick","handleExpandKeyDown","handleKeyDown","_a","firstChildId","firstChildState","_b","parentState","_c","previousItemToFocus","getPreviousItemToFocus","_d","nextItemToFocus","getNextItemToFocus","_e","enhancedChildren","cloneThroughFragments","hasChildren","Children","paddingLeftByLevel","dropzonePadding","DEFAULT_TREE_ITEM_PADDING","React","DropZone","DropZonePosition","getAcceptTypes","merge","FOCUS_VISIBLE_STYLE"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAMA,KAAmB,KACnBC,KAAkB,GAEXC,KAAW,CAAC;AAAA,EACrB,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAWC;AAAA,EACX,kBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AACJ,MAAqB;AACX,QAAA;AAAA,IACF,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAQC;AAAA,IACR,kBAAAC;AAAA,IACA,0BAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,iBAAAC;AAAA,MACAC,GAAe,GAEbC,IAAgBH,EAAU,MAAM,IAAIlB,CAAE,GACtCsB,IAAUC,GAAuB,IAAI,GAErC,CAACC,GAASC,CAAU,IAAIC,GAAkB,EAAK,GAC/CC,IAAmBC,EAAY,MAAMH,EAAW,EAAI,GAAG,CAAA,CAAE,GACzDI,IAAmBD,EAAY,MAAMH,EAAW,EAAK,GAAG,CAAA,CAAE,GAE1DK,IAAOC;AAAA,IACT,MAAOV,KAAA,QAAAA,EAAe,WAAWW,GAAwBhC,GAAIqB,EAAc,UAAUH,CAAS,IAAI;AAAA,IAClG,CAAClB,GAAIqB,KAAA,gBAAAA,EAAe,UAAUH,CAAS;AAAA,EAAA;AAG3C,EAAAe,EAAU,MAAM;AACZ,QAAIX,EAAQ;AACS,aAAAP,EAAA;AAAA,QACb,IAAAf;AAAA,QACA,UAAAC;AAAA,QACA,OAAOQ,KAAS;AAAA,QAChB,YAAYa,EAAQ;AAAA,MAAA,CACvB,GAEM,MAAM;AACT,QAAAL,EAAmBjB,CAAE;AAAA,MAAA;AAAA,EAE7B,GACD,CAACA,GAAIS,GAAOR,GAAUc,GAAkBE,GAAoBK,CAAO,CAAC,GAEvEW,EAAU,MAAM;AACN,UAAAC,IAAcC,GAAgB3B,CAAQ,EAAE,IAAI,CAAC4B,MAAUA,EAAM,MAAM,EAAE;AAClD,IAAApB,EAAA,EAAE,IAAAhB,GAAI,aAAakC,EAAY,SAAS,IAAIA,IAAc,QAAW;AAAA,EAC/F,GAAA,CAAC1B,GAAUR,GAAIgB,CAAwB,CAAC;AAE3C,QAAM,CAAC,EAAE,SAAAqB,EAAA,GAAWC,CAAI,IAAIC,GAAQ;AAAA,IAChC,MAAM,EAAE,IAAAvC,GAAI,MAAAM,GAAM,MAAAwB,EAAK;AAAA,IACvB,SAAS,CAACU,OAAa;AAAA,MACnB,SAASA,EAAQ,WAAW,IAAI3C,KAAmBC;AAAA,MACnD,YAAY0C,EAAQ,WAAW;AAAA,IAAA;AAAA,IAEnC,MAAMlC,KAAQI;AAAA,IACd,SAASP,KAAkBQ;AAAA,EAAA,CAC9B,GAEK8B,IAAab;AAAA,IACf,CACIc,GACAC,GACAC,MACC;AACU,MAAA9B,EAAA4B,GAAYC,GAAYC,CAAQ,GAClCvC,KAAA,QAAAA,EAAAqC,GAAYC,GAAYC;AAAA,IACrC;AAAA,IACA,CAACvC,GAAQS,CAAU;AAAA,EAAA,GAGjB+B,IAAejB;AAAA,IACjB,CAACkB,MAAsC;AACnC,MAAIxB,EAAQ,WAAWyB,GAAaD,EAAM,QAAuBxB,EAAQ,OAAO,MAC5EwB,EAAM,gBAAgB,GACtBlC,EAASZ,CAAE;AAAA,IAEnB;AAAA,IACA,CAACA,GAAIY,CAAQ;AAAA,EAAA,GAGXoC,IAAoBpB;AAAA,IACtB,CAACkB,MAAsB;AACnB,MAAAA,EAAM,gBAAgB,GACtBjC,EAASb,GAAI,CAACkB,EAAU,YAAY,IAAIlB,CAAE,CAAC;AAAA,IAC/C;AAAA,IACA,CAACA,GAAIa,GAAUK,EAAU,WAAW;AAAA,EAAA,GAGlC+B,IAAsBrB;AAAA,IACxB,CAACkB,MAAyB;AAClB,MAAA,SAAS,kBAAkBxB,EAAQ,YAAYwB,EAAM,QAAQ,WAAWA,EAAM,QAAQ,aACtFA,EAAM,gBAAgB,GACtBjC,EAASb,GAAI,CAACkB,EAAU,YAAY,IAAIlB,CAAE,CAAC;AAAA,IAEnD;AAAA,IACA,CAACA,GAAIa,GAAUK,EAAU,WAAW;AAAA,EAAA,GAGlCgC,IAAgBtB;AAAA,IAClB,CAACkB,MAAyB;;AAClB,UAAA,SAAS,kBAAkBxB,EAAQ;AACnC,gBAAQwB,EAAM,MAAM;AAAA,UAChB,KAAK;AACD,YAAAA,EAAM,eAAe,GACrBlC,EAASZ,CAAE;AACX;AAAA,UAEJ,KAAK;AACD,YAAA8C,EAAM,eAAe,GACjBzB,KAAA,QAAAA,EAAe,cACfR,EAASb,GAAI,CAACkB,EAAU,YAAY,IAAIlB,CAAE,CAAC,IAE3CY,EAASZ,CAAE;AAEf;AAAA,UAEJ,KAAK;AAED,gBADA8C,EAAM,eAAe,GACjBzB,KAAA,QAAAA,EAAe,eAAe,CAACH,EAAU,YAAY,IAAIlB,CAAE;AAC3D,cAAAa,EAASb,GAAI,EAAI;AAAA,sBACVmD,IAAA9B,KAAA,gBAAAA,EAAe,gBAAf,QAAA8B,EAA6B,IAAI;AAClC,oBAAAC,IAAe/B,EAAc,YAAY,CAAC,GAC1CgC,IAAkBnC,EAAU,MAAM,IAAIkC,CAAY;AACxD,eAAAE,IAAAD,KAAA,gBAAAA,EAAiB,eAAjB,QAAAC,EAA6B;AAAA,YACjC;AACA;AAAA,UAEJ,KAAK;AAED,gBADAR,EAAM,eAAe,GACjBzB,KAAA,QAAAA,EAAe,eAAeH,EAAU,YAAY,IAAIlB,CAAE;AAC1D,cAAAa,EAASb,GAAI,EAAK;AAAA,qBACXqB,KAAA,QAAAA,EAAe,UAAU;AAChC,oBAAMpB,IAAWoB,EAAc,UACzBkC,IAAcrC,EAAU,MAAM,IAAIjB,CAAQ;AAChD,eAAAuD,IAAAD,KAAA,gBAAAA,EAAa,eAAb,QAAAC,EAAyB;AAAA,YAC7B;AACA;AAAA,UAEJ,KAAK;AAED,gBADAV,EAAM,eAAe,GACjBzB,GAAe;AACf,oBAAMoC,IAAsBC,GAAuB1D,GAAIqB,GAAeH,CAAS;AAC/E,eAAAyC,IAAAF,KAAA,gBAAAA,EAAqB,eAArB,QAAAE,EAAiC;AAAA,YACrC;AACA;AAAA,UAEJ,KAAK;AAED,gBADAb,EAAM,eAAe,GACjBzB,GAAe;AACf,oBAAMuC,IAAkBC,GAAmB7D,GAAIqB,GAAeH,CAAS;AACvE,eAAA4C,IAAAF,KAAA,gBAAAA,EAAiB,eAAjB,QAAAE,EAA6B;AAAA,YACjC;AACA;AAAA,QACR;AAAA,IAER;AAAA,IACA,CAAC9D,GAAIa,GAAUD,GAAUS,GAAeH,CAAS;AAAA,EAAA,GAG/C6C,IAAmBhC;AAAA,IACrB,MAAOvB,IAAWwD,GAAsBxD,GAAU,EAAE,UAAUR,GAAI,QAAQS,KAAS,KAAK,EAAE,CAAC,IAAI,CAAC;AAAA,IAChG,CAACD,GAAUR,GAAIS,CAAK;AAAA,EAAA,GAGlBwD,IAAcC,GAAS,MAAMH,CAAgB,IAAI,GAEjDI,MAAsB9C,KAAA,gBAAAA,EAAe,UAAS,KAAK,KAAKF,EAAgB,MAExEiD,IAAkBD,IAAqBE,GAA0B;AAEvE,SACK,gBAAAC,EAAA,cAAA,MAAA,EAAG,gBAAa,aAAY,KAAKhC,GAAM,OAAO,EAAE,SAAAD,GAAS,WAAW,uBAAuB,EAAA,GACvFP,MAAS,IACN,gBAAAwC,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,OAAO;AAAA,QACH,aAAaF;AAAA,MACjB;AAAA,IAAA;AAAA,IAEA,gBAAAE,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,iBAAeC,EAAiB;AAAA,QAChC,MAAM;AAAA,UACF,YAAY,EAAE,IAAAxE,GAAI,MAAM8B,KAAQ,GAAG,MAAAxB,EAAK;AAAA,UACxC,UAAUkE,EAAiB;AAAA,QAC/B;AAAA,QACA,QAAQ/B;AAAA,QACR,QAAQgC,EAAelE,KAAWG,GAAQ,QAAQ;AAAA,MAAA;AAAA,IACtD;AAAA,EAAA,IAEJ,MAEJ,gBAAA4D,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,iBAAeC,EAAiB;AAAA,MAChC,MAAM;AAAA,QACF,YAAY,EAAE,IAAAxE,GAAI,MAAM8B,KAAQ,GAAG,MAAAxB,EAAK;AAAA,QACxC,UAAUkE,EAAiB;AAAA,MAC/B;AAAA,MACA,QAAQ/B;AAAA,MACR,QAAQgC,EAAelE,KAAWG,GAAQ,QAAQ;AAAA,IAAA;AAAA,IAElD,gBAAA4D,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWI,EAAM;AAAA,UACbxD,EAAU,YAAY,IAAIlB,CAAE,IACtB,mKACA;AAAA,UACN2E;AAAA,UACA;AAAA,QAAA,CACH;AAAA,QACD,gBAAa;AAAA,QACb,OAAO;AAAA,UACH,aAAaR;AAAA,UACb,cAAchD,EAAgB;AAAA,UAC9B,YAAYA,EAAgB;AAAA,UAC5B,eAAeA,EAAgB;AAAA,QACnC;AAAA,QACA,KAAKG;AAAA,QACL,MAAK;AAAA,QACL,cAAYpB;AAAA,QACZ,cAAYmB,KAAA,gBAAAA,EAAe;AAAA,QAC3B,iBAAeH,EAAU,YAAY,IAAIlB,CAAE;AAAA,QAC3C,iBAAekB,EAAU,YAAY,IAAIlB,CAAE;AAAA,QAC3C,UAAU;AAAA,QACV,SAAS6C;AAAA,QACT,WAAWK;AAAA,QACX,cAAcvB;AAAA,QACd,cAAcE;AAAA,MAAA;AAAA,MAEd,gBAAAyC,EAAA,cAAC,SAAI,WAAU,mEAAA,mCACV,OAAI,EAAA,WAAU,6DACVL,KACG,gBAAAK,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,gBAAa;AAAA,UACb,WAAU;AAAA,UACV,SAAStB;AAAA,UACT,WAAWC;AAAA,UACX,UAAU;AAAA,QAAA;AAAA,QAEV,gBAAAqB,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWI,EAAM;AAAA,cACb;AAAA,cACAxD,EAAU,YAAY,IAAIlB,CAAE,KAAK;AAAA,cACjCkB,EAAU,YAAY,IAAIlB,CAAE,KAAK;AAAA,YAAA,CACpC;AAAA,UAAA;AAAA,QACL;AAAA,MAAA,CAGZ,GAECE,oCAAS,QAAM,MAAAA,CAAM,IAAU,MAE/BE,KAAA,gBAAAA,EAAmB,EAAE,UAAUc,EAAU,YAAY,IAAIlB,CAAE,KAAK,IAAO,SAAAwB,EAAA,EAC5E;AAAA,IACJ;AAAA,EAAA,GAGHN,EAAU,YAAY,IAAIlB,CAAE,IACzB,gBAAAsE,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,gBAAa;AAAA,IAAA;AAAA,IAEZP;AAAA,EAAA,IAEL,MAEJ,gBAAAO,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,OAAO;AAAA,QACH,aAAaF;AAAA,MACjB;AAAA,IAAA;AAAA,IAEA,gBAAAE,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,iBAAeC,EAAiB;AAAA,QAChC,MAAM;AAAA,UACF,YAAY,EAAE,IAAAxE,GAAI,MAAM8B,KAAQ,GAAG,MAAAxB,EAAK;AAAA,UACxC,UAAUkE,EAAiB;AAAA,QAC/B;AAAA,QACA,QAAQ/B;AAAA,QACR,QAAQgC,EAAelE,KAAWG,GAAQ,OAAO;AAAA,MAAA;AAAA,IACrD;AAAA,EAAA,CAER;AAER;AACAX,GAAS,cAAc;"}
1	+ {"version":3,"file":"TreeItem.es.js","sources":["../../../src/components/Tree/TreeItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport React, { Children, KeyboardEvent, MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useDrag } from 'react-dnd';\n\nimport { merge } from '@utilities/merge';\nimport { DraggableItem, DropZonePosition } from '@utilities/dnd';\n\nimport { DropZone } from '@components/DropZone';\nimport type { TreeItemProps } from '@components/Tree/types';\nimport { useTreeContext } from '@components/Tree/TreeContext';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\n\nimport { getAcceptTypes, getItemPositionInParent, getNextItemToFocus, getPreviousItemToFocus } from './helpers';\nimport { cloneThroughFragments, flattenChildren, isDescendant } from './utils';\nimport { DEFAULT_TREE_ITEM_PADDING } from './utils/defaultValues';\n\nconst DRAGGING_OPACITY = 0.4;\nconst DEFAULT_OPACITY = 1;\n\nexport const TreeItem = ({\n id,\n parentId,\n label,\n draggable: propsDraggable,\n contentComponent,\n onDrop,\n type,\n accepts,\n children,\n level,\n}: TreeItemProps) => {\n const {\n treeId,\n draggable,\n onSelect,\n onExpand,\n onDrop: onTreeDrop,\n registerTreeItem,\n registerTreeItemChildren,\n unregisterTreeItem,\n treeState,\n baseItemPadding,\n } = useTreeContext();\n\n const treeItemState = treeState.items.get(id);\n const itemRef = useRef<HTMLDivElement>(null);\n\n const [hovered, setHovered] = useState<boolean>(false);\n const handleMouseEnter = useCallback(() => setHovered(true), []);\n const handleMouseLeave = useCallback(() => setHovered(false), []);\n\n const sort = useMemo(\n () => (treeItemState?.parentId ? getItemPositionInParent(id, treeItemState.parentId, treeState) : -1),\n [id, treeItemState?.parentId, treeState],\n );\n\n useEffect(() => {\n if (itemRef.current) {\n registerTreeItem({\n id,\n parentId,\n level: level ?? 0,\n domElement: itemRef.current,\n });\n\n return () => {\n unregisterTreeItem(id);\n };\n }\n }, [id, level, parentId, registerTreeItem, unregisterTreeItem, itemRef]);\n\n useEffect(() => {\n const childrenIds = flattenChildren(children).map((child) => child.props.id);\n registerTreeItemChildren({ id, childrenIds: childrenIds.length > 0 ? childrenIds : undefined });\n }, [children, id, registerTreeItemChildren]);\n\n const [{ opacity }, drag] = useDrag({\n item: { id, type, sort },\n collect: (monitor) => ({\n opacity: monitor.isDragging() ? DRAGGING_OPACITY : DEFAULT_OPACITY,\n isDragging: monitor.isDragging(),\n }),\n type: type ?? treeId,\n canDrag: propsDraggable ?? draggable,\n });\n\n const handleDrop = useCallback(\n (\n targetItem: DraggableItem<{ id: string; sort: number }>,\n sourceItem: DraggableItem<{ id: string; sort: number }>,\n position: DropZonePosition,\n ) => {\n onTreeDrop(targetItem, sourceItem, position);\n onDrop?.(targetItem, sourceItem, position);\n },\n [onDrop, onTreeDrop],\n );\n\n const handleSelect = useCallback(\n (event: MouseEvent<HTMLDivElement>) => {\n if (itemRef.current && isDescendant(event.target as HTMLElement, itemRef.current)) {\n event.stopPropagation();\n onSelect(id);\n }\n },\n [id, onSelect],\n );\n\n const handleExpandClick = useCallback(\n (event: MouseEvent) => {\n event.stopPropagation();\n onExpand(id, !treeState.expandedIds.has(id));\n },\n [id, onExpand, treeState.expandedIds],\n );\n\n const handleExpandKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (document.activeElement === itemRef.current && (event.key === 'Space' \|\| event.key === 'Enter')) {\n event.stopPropagation();\n onExpand(id, !treeState.expandedIds.has(id));\n }\n },\n [id, onExpand, treeState.expandedIds],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (document.activeElement === itemRef.current) {\n switch (event.code) {\n case 'Enter':\n event.preventDefault();\n onSelect(id);\n break;\n\n case 'Space':\n event.preventDefault();\n if (treeItemState?.childrenIds) {\n onExpand(id, !treeState.expandedIds.has(id));\n } else {\n onSelect(id);\n }\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n if (treeItemState?.childrenIds && !treeState.expandedIds.has(id)) {\n onExpand(id, true);\n } else if (treeItemState?.childrenIds?.[0]) {\n const firstChildId = treeItemState.childrenIds[0];\n const firstChildState = treeState.items.get(firstChildId);\n firstChildState?.domElement?.focus();\n }\n break;\n\n case 'ArrowLeft':\n event.preventDefault();\n if (treeItemState?.childrenIds && treeState.expandedIds.has(id)) {\n onExpand(id, false);\n } else if (treeItemState?.parentId) {\n const parentId = treeItemState.parentId;\n const parentState = treeState.items.get(parentId);\n parentState?.domElement?.focus();\n }\n break;\n\n case 'ArrowUp':\n event.preventDefault();\n if (treeItemState) {\n const previousItemToFocus = getPreviousItemToFocus(id, treeItemState, treeState);\n previousItemToFocus?.domElement?.focus();\n }\n break;\n\n case 'ArrowDown':\n event.preventDefault();\n if (treeItemState) {\n const nextItemToFocus = getNextItemToFocus(id, treeItemState, treeState);\n nextItemToFocus?.domElement?.focus();\n }\n break;\n }\n }\n },\n [id, onExpand, onSelect, treeItemState, treeState],\n );\n\n const enhancedChildren = useMemo(\n () => (children ? cloneThroughFragments(children, { parentId: id, level: (level \|\| 0) + 1 }) : []),\n [children, id, level],\n );\n\n const hasChildren = Children.count(enhancedChildren) > 0;\n\n const paddingLeftByLevel = (treeItemState?.level ?? 0) 16 + baseItemPadding.left;\n // Dropzone positioning is matched with existing styles from before https://github.com/Frontify/fondue/pull/1270\n const dropzonePadding = paddingLeftByLevel - DEFAULT_TREE_ITEM_PADDING.left;\n\n return (\n <li data-test-id=\"tree-item\" ref={drag} style={{ opacity, transform: 'translate3d(0, 0, 0)' }}>\n {sort === 0 ? (\n <div\n style={{\n paddingLeft: dropzonePadding,\n }}\n >\n <DropZone\n data-position={DropZonePosition.Before}\n data={{\n targetItem: { id, sort: sort ?? 0, type },\n position: DropZonePosition.Before,\n }}\n onDrop={handleDrop}\n accept={getAcceptTypes(accepts ?? treeId, 'before')}\n />\n </div>\n ) : null}\n\n <DropZone\n data-position={DropZonePosition.Within}\n data={{\n targetItem: { id, sort: sort ?? 0, type },\n position: DropZonePosition.Within,\n }}\n onDrop={handleDrop}\n accept={getAcceptTypes(accepts ?? treeId, 'within')}\n >\n <div\n className={merge([\n treeState.selectedIds.has(id)\n ? 'tw-font-medium tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover hover:tw-text-box-neutral-strong-inverse-hover'\n : 'tw-text-text hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n FOCUS_VISIBLE_STYLE,\n 'tw-relative tw-z-30 tw-leading-5 tw-no-underline tw-flex',\n ])}\n data-test-id=\"tree-item-content\"\n style={{\n paddingLeft: paddingLeftByLevel,\n paddingRight: baseItemPadding.right,\n paddingTop: baseItemPadding.top,\n paddingBottom: baseItemPadding.bottom,\n }}\n ref={itemRef}\n role=\"treeitem\"\n aria-label={label}\n aria-level={treeItemState?.level}\n aria-selected={treeState.selectedIds.has(id)}\n aria-expanded={treeState.expandedIds.has(id)}\n tabIndex={0}\n onClick={handleSelect}\n onKeyDown={handleKeyDown}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n <div className=\"tw-flex tw-flex-1 tw-space-x-1 tw-items-center tw-h-6 tw-min-w-0\">\n <div className=\"tw-w-2 tw-h-3 tw-flex tw-items-center tw-justify-center\">\n {hasChildren && (\n <button\n data-test-id=\"tree-item-toggle\"\n className=\"tw-flex tw-items-center tw-justify-center tw-p-1.5 tw-cursor-pointer\"\n onClick={handleExpandClick}\n onKeyDown={handleExpandKeyDown}\n tabIndex={0}\n >\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 treeState.selectedIds.has(id) && 'tw-text-box-selected-strong-inverse',\n treeState.expandedIds.has(id) && 'tw-rotate-90',\n ])}\n />\n </button>\n )}\n </div>\n\n {label ? <span>{label}</span> : null}\n\n {contentComponent?.({ selected: treeState.selectedIds.has(id) ?? false, hovered })}\n </div>\n </div>\n </DropZone>\n\n {treeState.expandedIds.has(id) ? (\n <ul\n className=\"tw-p-0 tw-m-0 tw-list-none tw-font-sans tw-font-normal tw-text-left\"\n data-test-id=\"sub-tree-items\"\n >\n {enhancedChildren}\n </ul>\n ) : null}\n\n <div\n style={{\n paddingLeft: dropzonePadding,\n }}\n >\n <DropZone\n data-position={DropZonePosition.After}\n data={{\n targetItem: { id, sort: sort ?? 0, type },\n position: DropZonePosition.After,\n }}\n onDrop={handleDrop}\n accept={getAcceptTypes(accepts ?? treeId, 'after')}\n />\n </div>\n </li>\n );\n};\nTreeItem.displayName = 'FondueTreeItem';\n"],"names":["DRAGGING_OPACITY","DEFAULT_OPACITY","TreeItem","id","parentId","label","propsDraggable","contentComponent","onDrop","type","accepts","children","level","treeId","draggable","onSelect","onExpand","onTreeDrop","registerTreeItem","registerTreeItemChildren","unregisterTreeItem","treeState","baseItemPadding","useTreeContext","treeItemState","itemRef","useRef","hovered","setHovered","useState","handleMouseEnter","useCallback","handleMouseLeave","sort","useMemo","getItemPositionInParent","useEffect","childrenIds","flattenChildren","child","opacity","drag","useDrag","monitor","handleDrop","targetItem","sourceItem","position","handleSelect","event","isDescendant","handleExpandClick","handleExpandKeyDown","handleKeyDown","_a","firstChildId","firstChildState","_b","parentState","_c","previousItemToFocus","getPreviousItemToFocus","_d","nextItemToFocus","getNextItemToFocus","_e","enhancedChildren","cloneThroughFragments","hasChildren","Children","paddingLeftByLevel","dropzonePadding","DEFAULT_TREE_ITEM_PADDING","React","DropZone","DropZonePosition","getAcceptTypes","merge","FOCUS_VISIBLE_STYLE"],"mappings":"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"}