@frontify/fondue 12.0.0-beta.144 → 12.0.0-beta.145

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

@@ -9,10 +9,10 @@ import { isDescendant as de } from "./utils/isInsideOfElement.es.js";
 import { getNextItemToFocus as ce } from "./helpers/getNextItemToFocus.es.js";
 import { getPreviousItemToFocus as ie } from "./helpers/getPreviousItemToFocus.es.js";
 import { getAcceptTypes as y } from "./helpers/getAcceptedTypes.es.js";
-import { flattenChildren as me } from "./utils/flattenChildren.es.js";
-import { cloneThroughFragments as pe } from "./utils/cloneThroughFragment.es.js";
+import { flattenChildren as pe } from "./utils/flattenChildren.es.js";
+import { cloneThroughFragments as me } from "./utils/cloneThroughFragment.es.js";
 import { DropZone as k } from "../DropZone/DropZone.es.js";
-import { DropZonePosition as m } from "../../utilities/dnd/types.es.js";
+import { DropZonePosition as p } from "../../utilities/dnd/types.es.js";
 const fe = 0.4, we = 1, ge = ({
   id: e,
   parentId: A,
@@ -20,7 +20,7 @@ const fe = 0.4, we = 1, ge = ({
   draggable: j,
   contentComponent: v,
   onDrop: h,
-  type: p,
+  type: m,
   accepts: D,
   children: f,
   level: x
@@ -51,16 +51,16 @@ const fe = 0.4, we = 1, ge = ({
         C(e);
       };
   }, [e, x, A, P, C, l]), O(() => {
-    const r = me(f).map((d) => d.props.id);
+    const r = pe(f).map((d) => d.props.id);
     N({ id: e, childrenIds: r.length > 0 ? r : void 0 });
   }, [f, e, N]);
   const [{ opacity: V }, q] = ne({
-    item: { id: e, type: p, sort: g },
+    item: { id: e, type: m, sort: g },
     collect: (r) => ({
       opacity: r.isDragging() ? fe : we,
       isDragging: r.isDragging()
     }),
-    type: p ?? E,
+    type: m ?? E,
     canDrag: j ?? z
   }), T = i(
     (r, d, u) => {
@@ -125,7 +125,7 @@ const fe = 0.4, we = 1, ge = ({
     },
     [e, s, w, t, n]
   ), _ = U(
-    () => f ? pe(f, { parentId: e, level: (x || 0) + 1 }) : [],
+    () => f ? me(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 - 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(
@@ -138,10 +138,10 @@ const fe = 0.4, we = 1, ge = ({
     /* @__PURE__ */ o.createElement(
       k,
       {
-        "data-position": m.Before,
+        "data-position": p.Before,
         data: {
-          targetItem: { id: e, sort: g ?? 0, type: p },
-          position: m.Before
+          targetItem: { id: e, sort: g ?? 0, type: m },
+          position: p.Before
         },
         onDrop: T,
         accept: y(D ?? E, "before")
@@ -150,10 +150,10 @@ const fe = 0.4, we = 1, ge = ({
   ) : null, /* @__PURE__ */ o.createElement(
     k,
     {
-      "data-position": m.Within,
+      "data-position": p.Within,
       data: {
-        targetItem: { id: e, sort: g ?? 0, type: p },
-        position: m.Within
+        targetItem: { id: e, sort: g ?? 0, type: m },
+        position: p.Within
       },
       onDrop: T,
       accept: y(D ?? E, "within")
@@ -189,7 +189,7 @@ const fe = 0.4, we = 1, ge = ({
         "button",
         {
           "data-test-id": "tree-item-toggle",
-          className: "tw-flex tw-items-center tw-justify-center tw-p-1.5 tw-cursor-pointer",
+          className: "tw-flex tw-items-center tw-justify-center tw-px-2 tw-py-1.5 tw-cursor-pointer",
           onClick: Q,
           onKeyDown: X,
           tabIndex: 0
@@ -223,10 +223,10 @@ const fe = 0.4, we = 1, ge = ({
     /* @__PURE__ */ o.createElement(
       k,
       {
-        "data-position": m.After,
+        "data-position": p.After,
         data: {
-          targetItem: { id: e, sort: g ?? 0, type: p },
-          position: m.After
+          targetItem: { id: e, sort: g ?? 0, type: m },
+          position: p.After
         },
         onDrop: T,
         accept: y(D ?? E, "after")

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

@@ -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-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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"}
+{"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-px-2 tw-py-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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"}