@mantine/core 9.1.0 → 9.2.0

package/cjs/components/Tree/TreeNode.cjs

@@ -15,7 +15,7 @@ function getValuesRange(anchor, value, flatValues) {
 	const end = Math.max(anchorIndex, valueIndex);
 	return flatValues.slice(start, end + 1);
 }
-function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selectOnClick, isSubtree, level = 1, renderNode, flatValues, allowRangeSelection, expandOnSpace, checkOnSpace, keepMounted, onDragDrop, dragStateRef, data }) {
+function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selectOnClick, isSubtree, level = 1, renderNode, flatValues, allowRangeSelection, expandOnSpace, checkOnSpace, keepMounted, onDragDrop, allowDrop, withDragHandle, dragStateRef, data }) {
 	const ref = (0, react.useRef)(null);
 	const hasLoadedChildren = Array.isArray(node.children);
 	const hasAsyncChildren = !!node.hasChildren && !hasLoadedChildren;
@@ -39,15 +39,19 @@ function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selec
 		checkOnSpace,
 		keepMounted,
 		onDragDrop,
+		allowDrop,
+		withDragHandle,
 		dragStateRef,
 		data
 	}, child.value));
-	const dragProps = require_use_tree_node_drag_drop.useTreeNodeDragDrop({
+	const { elementProps: dragElementProps, dragHandleProps } = require_use_tree_node_drag_drop.useTreeNodeDragDrop({
 		nodeValue: node.value,
 		hasChildren,
 		data,
 		onDragDrop,
-		dragStateRef
+		dragStateRef,
+		allowDrop,
+		withDragHandle
 	});
 	const handleKeyDown = (event) => {
 		if (event.nativeEvent.code === "ArrowRight") {
@@ -107,7 +111,7 @@ function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selec
 		onClick: handleNodeClick,
 		"data-selected": selected || void 0,
 		"data-value": node.value,
-		...dragProps
+		...dragElementProps
 	};
 	const withLoadingIndicator = isExpanded && isLoading && nested.length === 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
@@ -130,7 +134,8 @@ function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selec
 				hasChildren,
 				isLoading,
 				loadError,
-				elementProps
+				elementProps,
+				dragHandleProps
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				...elementProps,
 				children: node.label

package/cjs/components/Tree/TreeNode.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TreeNode.cjs","names":["useTreeNodeDragDrop","findElementAncestor","Box","Loader","Activity"],"sources":["../../../src/components/Tree/TreeNode.tsx"],"sourcesContent":["import { Activity, useRef } from 'react';\nimport { Box, findElementAncestor, GetStylesApi } from '../../core';\nimport { Loader } from '../Loader';\nimport type { TreeDragDropPayload } from './move-tree-node/move-tree-node';\nimport type { RenderNode, TreeDragState, TreeFactory, TreeNodeData } from './Tree';\nimport type { TreeController } from './use-tree';\nimport { useTreeNodeDragDrop } from './use-tree-node-drag-drop';\n\nfunction getValuesRange(anchor: string | null, value: string | undefined, flatValues: string[]) {\n  if (!anchor || !value) {\n    return [];\n  }\n\n  const anchorIndex = flatValues.indexOf(anchor);\n  const valueIndex = flatValues.indexOf(value);\n  const start = Math.min(anchorIndex, valueIndex);\n  const end = Math.max(anchorIndex, valueIndex);\n\n  return flatValues.slice(start, end + 1);\n}\n\ninterface TreeNodeProps {\n  node: TreeNodeData;\n  getStyles: GetStylesApi<TreeFactory>;\n  rootIndex: number | undefined;\n  controller: TreeController;\n  expandOnClick: boolean | undefined;\n  flatValues: string[];\n  isSubtree?: boolean;\n  level?: number;\n  renderNode: RenderNode | undefined;\n  selectOnClick: boolean | undefined;\n  allowRangeSelection: boolean | undefined;\n  expandOnSpace: boolean | undefined;\n  checkOnSpace: boolean | undefined;\n  keepMounted: boolean | undefined;\n  onDragDrop: ((payload: TreeDragDropPayload) => void) | undefined;\n  dragStateRef: React.RefObject<TreeDragState>;\n  data: TreeNodeData[];\n}\n\nexport function TreeNode({\n  node,\n  getStyles,\n  rootIndex,\n  controller,\n  expandOnClick,\n  selectOnClick,\n  isSubtree,\n  level = 1,\n  renderNode,\n  flatValues,\n  allowRangeSelection,\n  expandOnSpace,\n  checkOnSpace,\n  keepMounted,\n  onDragDrop,\n  dragStateRef,\n  data,\n}: TreeNodeProps) {\n  const ref = useRef<HTMLLIElement>(null);\n  const hasLoadedChildren = Array.isArray(node.children);\n  const hasAsyncChildren = !!node.hasChildren && !hasLoadedChildren;\n  const hasChildren = hasLoadedChildren || hasAsyncChildren;\n  const isLoading = controller.isNodeLoading(node.value);\n  const loadError = controller.getNodeLoadError(node.value);\n  const isExpanded = controller.expandedState[node.value] || false;\n\n  const nested = (node.children || []).map((child) => (\n    <TreeNode\n      key={child.value}\n      node={child}\n      flatValues={flatValues}\n      getStyles={getStyles}\n      rootIndex={undefined}\n      level={level + 1}\n      controller={controller}\n      expandOnClick={expandOnClick}\n      isSubtree\n      renderNode={renderNode}\n      selectOnClick={selectOnClick}\n      allowRangeSelection={allowRangeSelection}\n      expandOnSpace={expandOnSpace}\n      checkOnSpace={checkOnSpace}\n      keepMounted={keepMounted}\n      onDragDrop={onDragDrop}\n      dragStateRef={dragStateRef}\n      data={data}\n    />\n  ));\n\n  const dragProps = useTreeNodeDragDrop({\n    nodeValue: node.value,\n    hasChildren,\n    data,\n    onDragDrop,\n    dragStateRef,\n  });\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.nativeEvent.code === 'ArrowRight') {\n      event.stopPropagation();\n      event.preventDefault();\n\n      if (isExpanded) {\n        event.currentTarget.querySelector<HTMLLIElement>('[role=treeitem]')?.focus();\n      } else {\n        controller.expand(node.value);\n      }\n    }\n\n    if (event.nativeEvent.code === 'ArrowLeft') {\n      event.stopPropagation();\n      event.preventDefault();\n      if (isExpanded && hasChildren) {\n        controller.collapse(node.value);\n      } else if (isSubtree) {\n        findElementAncestor(event.currentTarget as HTMLElement, '[role=treeitem]')?.focus();\n      }\n    }\n\n    if (event.nativeEvent.code === 'ArrowDown' || event.nativeEvent.code === 'ArrowUp') {\n      const root = findElementAncestor(event.currentTarget as HTMLElement, '[data-tree-root]');\n\n      if (!root) {\n        return;\n      }\n\n      event.stopPropagation();\n      event.preventDefault();\n      const nodes = Array.from(root.querySelectorAll<HTMLLIElement>('[role=treeitem]')).filter(\n        (treeNode) => treeNode.style.display !== 'none'\n      );\n      const index = nodes.indexOf(event.currentTarget as HTMLLIElement);\n\n      if (index === -1) {\n        return;\n      }\n\n      const nextIndex = event.nativeEvent.code === 'ArrowDown' ? index + 1 : index - 1;\n      nodes[nextIndex]?.focus();\n\n      if (event.shiftKey) {\n        const selectNode = nodes[nextIndex];\n\n        if (selectNode) {\n          controller.setSelectedState(\n            getValuesRange(controller.anchorNode, selectNode.dataset.value, flatValues)\n          );\n        }\n      }\n    }\n\n    if (event.nativeEvent.code === 'Space') {\n      if (expandOnSpace) {\n        event.stopPropagation();\n        event.preventDefault();\n        controller.toggleExpanded(node.value);\n      }\n\n      if (checkOnSpace) {\n        event.stopPropagation();\n        event.preventDefault();\n        controller.isNodeChecked(node.value)\n          ? controller.uncheckNode(node.value)\n          : controller.checkNode(node.value);\n      }\n    }\n  };\n\n  const handleNodeClick = (event: React.MouseEvent) => {\n    event.stopPropagation();\n\n    if (allowRangeSelection && event.shiftKey && controller.anchorNode) {\n      controller.setSelectedState(getValuesRange(controller.anchorNode, node.value, flatValues));\n      ref.current?.focus();\n    } else {\n      if (expandOnClick) {\n        controller.toggleExpanded(node.value);\n      }\n\n      selectOnClick && controller.select(node.value);\n      ref.current?.focus();\n    }\n  };\n\n  const selected = controller.selectedState.includes(node.value);\n  const elementProps = {\n    ...getStyles('label'),\n    onClick: handleNodeClick,\n    'data-selected': selected || undefined,\n    'data-value': node.value,\n    ...dragProps,\n  };\n\n  const withLoadingIndicator = isExpanded && isLoading && nested.length === 0;\n\n  return (\n    <li\n      {...getStyles('node', {\n        style: { '--label-offset': `calc(var(--level-offset) * ${level - 1})` },\n      })}\n      role=\"treeitem\"\n      aria-selected={selected}\n      data-value={node.value}\n      data-selected={selected || undefined}\n      data-level={level}\n      tabIndex={rootIndex === 0 ? 0 : -1}\n      onKeyDown={handleKeyDown}\n      ref={ref}\n    >\n      {typeof renderNode === 'function' ? (\n        renderNode({\n          node,\n          level,\n          selected,\n          tree: controller,\n          expanded: isExpanded,\n          hasChildren,\n          isLoading,\n          loadError,\n          elementProps,\n        })\n      ) : (\n        <div {...elementProps}>{node.label}</div>\n      )}\n\n      {withLoadingIndicator && (\n        <Box component=\"ul\" role=\"group\" {...getStyles('subtree')} data-level={level}>\n          <li\n            {...getStyles('node', {\n              style: { '--label-offset': `calc(var(--level-offset) * ${level})` },\n            })}\n          >\n            <div {...getStyles('label')}>\n              <Loader size={16} />\n            </div>\n          </li>\n        </Box>\n      )}\n\n      {keepMounted && nested.length > 0 ? (\n        <Activity mode={isExpanded ? 'visible' : 'hidden'}>\n          <Box component=\"ul\" role=\"group\" {...getStyles('subtree')} data-level={level}>\n            {nested}\n          </Box>\n        </Activity>\n      ) : (\n        isExpanded &&\n        nested.length > 0 && (\n          <Box component=\"ul\" role=\"group\" {...getStyles('subtree')} data-level={level}>\n            {nested}\n          </Box>\n        )\n      )}\n    </li>\n  );\n}\n\nTreeNode.displayName = '@mantine/core/TreeNode';\n"],"mappings":"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"}
+{"version":3,"file":"TreeNode.cjs","names":["useTreeNodeDragDrop","findElementAncestor","Box","Loader","Activity"],"sources":["../../../src/components/Tree/TreeNode.tsx"],"sourcesContent":["import { Activity, useRef } from 'react';\nimport { Box, findElementAncestor, GetStylesApi } from '../../core';\nimport { Loader } from '../Loader';\nimport type { TreeDragDropPayload } from './move-tree-node/move-tree-node';\nimport type { RenderNode, TreeDragState, TreeFactory, TreeNodeData } from './Tree';\nimport type { TreeController } from './use-tree';\nimport { TreeAllowDrop, useTreeNodeDragDrop } from './use-tree-node-drag-drop';\n\nfunction getValuesRange(anchor: string | null, value: string | undefined, flatValues: string[]) {\n  if (!anchor || !value) {\n    return [];\n  }\n\n  const anchorIndex = flatValues.indexOf(anchor);\n  const valueIndex = flatValues.indexOf(value);\n  const start = Math.min(anchorIndex, valueIndex);\n  const end = Math.max(anchorIndex, valueIndex);\n\n  return flatValues.slice(start, end + 1);\n}\n\ninterface TreeNodeProps {\n  node: TreeNodeData;\n  getStyles: GetStylesApi<TreeFactory>;\n  rootIndex: number | undefined;\n  controller: TreeController;\n  expandOnClick: boolean | undefined;\n  flatValues: string[];\n  isSubtree?: boolean;\n  level?: number;\n  renderNode: RenderNode | undefined;\n  selectOnClick: boolean | undefined;\n  allowRangeSelection: boolean | undefined;\n  expandOnSpace: boolean | undefined;\n  checkOnSpace: boolean | undefined;\n  keepMounted: boolean | undefined;\n  onDragDrop: ((payload: TreeDragDropPayload) => void) | undefined;\n  allowDrop: TreeAllowDrop | undefined;\n  withDragHandle: boolean | undefined;\n  dragStateRef: React.RefObject<TreeDragState>;\n  data: TreeNodeData[];\n}\n\nexport function TreeNode({\n  node,\n  getStyles,\n  rootIndex,\n  controller,\n  expandOnClick,\n  selectOnClick,\n  isSubtree,\n  level = 1,\n  renderNode,\n  flatValues,\n  allowRangeSelection,\n  expandOnSpace,\n  checkOnSpace,\n  keepMounted,\n  onDragDrop,\n  allowDrop,\n  withDragHandle,\n  dragStateRef,\n  data,\n}: TreeNodeProps) {\n  const ref = useRef<HTMLLIElement>(null);\n  const hasLoadedChildren = Array.isArray(node.children);\n  const hasAsyncChildren = !!node.hasChildren && !hasLoadedChildren;\n  const hasChildren = hasLoadedChildren || hasAsyncChildren;\n  const isLoading = controller.isNodeLoading(node.value);\n  const loadError = controller.getNodeLoadError(node.value);\n  const isExpanded = controller.expandedState[node.value] || false;\n\n  const nested = (node.children || []).map((child) => (\n    <TreeNode\n      key={child.value}\n      node={child}\n      flatValues={flatValues}\n      getStyles={getStyles}\n      rootIndex={undefined}\n      level={level + 1}\n      controller={controller}\n      expandOnClick={expandOnClick}\n      isSubtree\n      renderNode={renderNode}\n      selectOnClick={selectOnClick}\n      allowRangeSelection={allowRangeSelection}\n      expandOnSpace={expandOnSpace}\n      checkOnSpace={checkOnSpace}\n      keepMounted={keepMounted}\n      onDragDrop={onDragDrop}\n      allowDrop={allowDrop}\n      withDragHandle={withDragHandle}\n      dragStateRef={dragStateRef}\n      data={data}\n    />\n  ));\n\n  const { elementProps: dragElementProps, dragHandleProps } = useTreeNodeDragDrop({\n    nodeValue: node.value,\n    hasChildren,\n    data,\n    onDragDrop,\n    dragStateRef,\n    allowDrop,\n    withDragHandle,\n  });\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.nativeEvent.code === 'ArrowRight') {\n      event.stopPropagation();\n      event.preventDefault();\n\n      if (isExpanded) {\n        event.currentTarget.querySelector<HTMLLIElement>('[role=treeitem]')?.focus();\n      } else {\n        controller.expand(node.value);\n      }\n    }\n\n    if (event.nativeEvent.code === 'ArrowLeft') {\n      event.stopPropagation();\n      event.preventDefault();\n      if (isExpanded && hasChildren) {\n        controller.collapse(node.value);\n      } else if (isSubtree) {\n        findElementAncestor(event.currentTarget as HTMLElement, '[role=treeitem]')?.focus();\n      }\n    }\n\n    if (event.nativeEvent.code === 'ArrowDown' || event.nativeEvent.code === 'ArrowUp') {\n      const root = findElementAncestor(event.currentTarget as HTMLElement, '[data-tree-root]');\n\n      if (!root) {\n        return;\n      }\n\n      event.stopPropagation();\n      event.preventDefault();\n      const nodes = Array.from(root.querySelectorAll<HTMLLIElement>('[role=treeitem]')).filter(\n        (treeNode) => treeNode.style.display !== 'none'\n      );\n      const index = nodes.indexOf(event.currentTarget as HTMLLIElement);\n\n      if (index === -1) {\n        return;\n      }\n\n      const nextIndex = event.nativeEvent.code === 'ArrowDown' ? index + 1 : index - 1;\n      nodes[nextIndex]?.focus();\n\n      if (event.shiftKey) {\n        const selectNode = nodes[nextIndex];\n\n        if (selectNode) {\n          controller.setSelectedState(\n            getValuesRange(controller.anchorNode, selectNode.dataset.value, flatValues)\n          );\n        }\n      }\n    }\n\n    if (event.nativeEvent.code === 'Space') {\n      if (expandOnSpace) {\n        event.stopPropagation();\n        event.preventDefault();\n        controller.toggleExpanded(node.value);\n      }\n\n      if (checkOnSpace) {\n        event.stopPropagation();\n        event.preventDefault();\n        controller.isNodeChecked(node.value)\n          ? controller.uncheckNode(node.value)\n          : controller.checkNode(node.value);\n      }\n    }\n  };\n\n  const handleNodeClick = (event: React.MouseEvent) => {\n    event.stopPropagation();\n\n    if (allowRangeSelection && event.shiftKey && controller.anchorNode) {\n      controller.setSelectedState(getValuesRange(controller.anchorNode, node.value, flatValues));\n      ref.current?.focus();\n    } else {\n      if (expandOnClick) {\n        controller.toggleExpanded(node.value);\n      }\n\n      selectOnClick && controller.select(node.value);\n      ref.current?.focus();\n    }\n  };\n\n  const selected = controller.selectedState.includes(node.value);\n  const elementProps = {\n    ...getStyles('label'),\n    onClick: handleNodeClick,\n    'data-selected': selected || undefined,\n    'data-value': node.value,\n    ...dragElementProps,\n  };\n\n  const withLoadingIndicator = isExpanded && isLoading && nested.length === 0;\n\n  return (\n    <li\n      {...getStyles('node', {\n        style: { '--label-offset': `calc(var(--level-offset) * ${level - 1})` },\n      })}\n      role=\"treeitem\"\n      aria-selected={selected}\n      data-value={node.value}\n      data-selected={selected || undefined}\n      data-level={level}\n      tabIndex={rootIndex === 0 ? 0 : -1}\n      onKeyDown={handleKeyDown}\n      ref={ref}\n    >\n      {typeof renderNode === 'function' ? (\n        renderNode({\n          node,\n          level,\n          selected,\n          tree: controller,\n          expanded: isExpanded,\n          hasChildren,\n          isLoading,\n          loadError,\n          elementProps,\n          dragHandleProps,\n        })\n      ) : (\n        <div {...elementProps}>{node.label}</div>\n      )}\n\n      {withLoadingIndicator && (\n        <Box component=\"ul\" role=\"group\" {...getStyles('subtree')} data-level={level}>\n          <li\n            {...getStyles('node', {\n              style: { '--label-offset': `calc(var(--level-offset) * ${level})` },\n            })}\n          >\n            <div {...getStyles('label')}>\n              <Loader size={16} />\n            </div>\n          </li>\n        </Box>\n      )}\n\n      {keepMounted && nested.length > 0 ? (\n        <Activity mode={isExpanded ? 'visible' : 'hidden'}>\n          <Box component=\"ul\" role=\"group\" {...getStyles('subtree')} data-level={level}>\n            {nested}\n          </Box>\n        </Activity>\n      ) : (\n        isExpanded &&\n        nested.length > 0 && (\n          <Box component=\"ul\" role=\"group\" {...getStyles('subtree')} data-level={level}>\n            {nested}\n          </Box>\n        )\n      )}\n    </li>\n  );\n}\n\nTreeNode.displayName = '@mantine/core/TreeNode';\n"],"mappings":"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"}

package/cjs/components/Tree/is-node-checked/is-node-checked.cjs

@@ -9,6 +9,7 @@ function isNodeChecked(value, data, checkedState) {
 }
 const memoizedIsNodeChecked = require_memoize.memoize(isNodeChecked);
 //#endregion
+exports.isNodeChecked = isNodeChecked;
 exports.memoizedIsNodeChecked = memoizedIsNodeChecked;
 
 //# sourceMappingURL=is-node-checked.cjs.map

package/cjs/components/Tree/is-node-indeterminate/is-node-indeterminate.cjs

@@ -8,6 +8,7 @@ function isNodeIndeterminate(value, data, checkedState) {
 }
 const memoizedIsNodeIndeterminate = require_memoize.memoize(isNodeIndeterminate);
 //#endregion
+exports.isNodeIndeterminate = isNodeIndeterminate;
 exports.memoizedIsNodeIndeterminate = memoizedIsNodeIndeterminate;
 
 //# sourceMappingURL=is-node-indeterminate.cjs.map

package/cjs/components/Tree/use-tree-node-drag-drop.cjs

@@ -1,5 +1,7 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_get_children_nodes_values = require("./get-children-nodes-values/get-children-nodes-values.cjs");
+let react = require("react");
 //#region packages/@mantine/core/src/components/Tree/use-tree-node-drag-drop.ts
 function isDescendantOf(data, ancestorValue, descendantValue) {
 	const ancestor = require_get_children_nodes_values.findTreeNode(ancestorValue, data);
@@ -25,10 +27,21 @@ function getDragDropPosition(event, element, hasChildren) {
 	if (y < height * .5) return "before";
 	return "after";
 }
-const EMPTY_DRAG_PROPS = {};
-function useTreeNodeDragDrop({ nodeValue, hasChildren, data, onDragDrop, dragStateRef }) {
+const EMPTY_DRAG_PROPS = {
+	elementProps: {},
+	dragHandleProps: void 0
+};
+function useTreeNodeDragDrop({ nodeValue, hasChildren, data, onDragDrop, dragStateRef, allowDrop, withDragHandle }) {
+	const [isDragHandleActive, setIsDragHandleActive] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		if (!withDragHandle || !isDragHandleActive) return;
+		const handleWindowMouseUp = () => setIsDragHandleActive(false);
+		window.addEventListener("mouseup", handleWindowMouseUp);
+		return () => window.removeEventListener("mouseup", handleWindowMouseUp);
+	}, [withDragHandle, isDragHandleActive]);
 	if (!onDragDrop) return EMPTY_DRAG_PROPS;
 	const handleDragStart = (event) => {
+		if (withDragHandle && !isDragHandleActive) return;
 		event.stopPropagation();
 		event.dataTransfer.effectAllowed = "move";
 		event.dataTransfer.setData("text/plain", nodeValue);
@@ -42,11 +55,22 @@ function useTreeNodeDragDrop({ nodeValue, hasChildren, data, onDragDrop, dragSta
 		const draggedValue = dragStateRef.current.draggedValue;
 		if (!draggedValue || draggedValue === nodeValue) return;
 		if (isDescendantOf(data, draggedValue, nodeValue)) return;
+		const target = event.currentTarget;
+		const position = getDragDropPosition(event, target, hasChildren);
+		if (allowDrop && !allowDrop({
+			draggedNode: draggedValue,
+			targetNode: nodeValue,
+			position
+		})) {
+			const prevTarget = dragStateRef.current.currentDropTarget;
+			if (prevTarget && prevTarget !== target) prevTarget.removeAttribute("data-drag-over");
+			target.removeAttribute("data-drag-over");
+			dragStateRef.current.currentDropTarget = null;
+			return;
+		}
 		event.preventDefault();
 		event.stopPropagation();
 		event.dataTransfer.dropEffect = "move";
-		const target = event.currentTarget;
-		const position = getDragDropPosition(event, target, hasChildren);
 		const prevTarget = dragStateRef.current.currentDropTarget;
 		if (prevTarget && prevTarget !== target) prevTarget.removeAttribute("data-drag-over");
 		target.setAttribute("data-drag-over", position);
@@ -66,11 +90,14 @@ function useTreeNodeDragDrop({ nodeValue, hasChildren, data, onDragDrop, dragSta
 		const position = target.getAttribute("data-drag-over");
 		target.removeAttribute("data-drag-over");
 		const draggedValue = dragStateRef.current.draggedValue;
-		if (draggedValue && position && draggedValue !== nodeValue) onDragDrop({
-			draggedNode: draggedValue,
-			targetNode: nodeValue,
-			position
-		});
+		if (draggedValue && position && draggedValue !== nodeValue) {
+			const payload = {
+				draggedNode: draggedValue,
+				targetNode: nodeValue,
+				position
+			};
+			if (!allowDrop || allowDrop(payload)) onDragDrop(payload);
+		}
 		dragStateRef.current.draggedValue = null;
 		dragStateRef.current.currentDropTarget = null;
 	};
@@ -80,14 +107,18 @@ function useTreeNodeDragDrop({ nodeValue, hasChildren, data, onDragDrop, dragSta
 		if (prevTarget) prevTarget.removeAttribute("data-drag-over");
 		dragStateRef.current.draggedValue = null;
 		dragStateRef.current.currentDropTarget = null;
+		if (withDragHandle) setIsDragHandleActive(false);
 	};
 	return {
-		draggable: true,
-		onDragStart: handleDragStart,
-		onDragOver: handleDragOver,
-		onDragLeave: handleDragLeave,
-		onDrop: handleDrop,
-		onDragEnd: handleDragEnd
+		elementProps: {
+			draggable: withDragHandle ? isDragHandleActive : true,
+			onDragStart: handleDragStart,
+			onDragOver: handleDragOver,
+			onDragLeave: handleDragLeave,
+			onDrop: handleDrop,
+			onDragEnd: handleDragEnd
+		},
+		dragHandleProps: withDragHandle ? { onMouseDown: () => setIsDragHandleActive(true) } : void 0
 	};
 }
 //#endregion

package/cjs/components/Tree/use-tree-node-drag-drop.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-tree-node-drag-drop.cjs","names":["findTreeNode"],"sources":["../../../src/components/Tree/use-tree-node-drag-drop.ts"],"sourcesContent":["import { findTreeNode } from './get-children-nodes-values/get-children-nodes-values';\nimport type { TreeDragDropPayload, TreeDragDropPosition } from './move-tree-node/move-tree-node';\nimport type { TreeDragState, TreeNodeData } from './Tree';\n\ninterface UseTreeNodeDragDropInput {\n  nodeValue: string;\n  hasChildren: boolean;\n  data: TreeNodeData[];\n  onDragDrop: ((payload: TreeDragDropPayload) => void) | undefined;\n  dragStateRef: React.RefObject<TreeDragState>;\n}\n\nfunction isDescendantOf(\n  data: TreeNodeData[],\n  ancestorValue: string,\n  descendantValue: string\n): boolean {\n  const ancestor = findTreeNode(ancestorValue, data);\n  if (!ancestor || !ancestor.children) {\n    return false;\n  }\n\n  function check(nodes: TreeNodeData[]): boolean {\n    for (const node of nodes) {\n      if (node.value === descendantValue) {\n        return true;\n      }\n\n      if (node.children && check(node.children)) {\n        return true;\n      }\n    }\n\n    return false;\n  }\n\n  return check(ancestor.children);\n}\n\nfunction getDragDropPosition(\n  event: React.DragEvent,\n  element: HTMLElement,\n  hasChildren: boolean\n): TreeDragDropPosition {\n  const rect = element.getBoundingClientRect();\n  const y = event.clientY - rect.top;\n  const height = rect.height;\n\n  if (hasChildren) {\n    if (y < height * 0.25) {\n      return 'before';\n    }\n\n    if (y > height * 0.75) {\n      return 'after';\n    }\n\n    return 'inside';\n  }\n\n  if (y < height * 0.5) {\n    return 'before';\n  }\n\n  return 'after';\n}\n\nconst EMPTY_DRAG_PROPS: Record<string, never> = {};\n\nexport function useTreeNodeDragDrop({\n  nodeValue,\n  hasChildren,\n  data,\n  onDragDrop,\n  dragStateRef,\n}: UseTreeNodeDragDropInput) {\n  if (!onDragDrop) {\n    return EMPTY_DRAG_PROPS;\n  }\n\n  const handleDragStart = (event: React.DragEvent) => {\n    event.stopPropagation();\n    event.dataTransfer.effectAllowed = 'move';\n    event.dataTransfer.setData('text/plain', nodeValue);\n    dragStateRef.current.draggedValue = nodeValue;\n\n    const target = event.currentTarget as HTMLElement;\n    requestAnimationFrame(() => {\n      target.setAttribute('data-dragging', 'true');\n    });\n  };\n\n  const handleDragOver = (event: React.DragEvent) => {\n    const draggedValue = dragStateRef.current.draggedValue;\n    if (!draggedValue || draggedValue === nodeValue) {\n      return;\n    }\n\n    if (isDescendantOf(data, draggedValue, nodeValue)) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n    event.dataTransfer.dropEffect = 'move';\n\n    const target = event.currentTarget as HTMLElement;\n    const position = getDragDropPosition(event, target, hasChildren);\n\n    const prevTarget = dragStateRef.current.currentDropTarget;\n    if (prevTarget && prevTarget !== target) {\n      prevTarget.removeAttribute('data-drag-over');\n    }\n\n    target.setAttribute('data-drag-over', position);\n    dragStateRef.current.currentDropTarget = target;\n  };\n\n  const handleDragLeave = (event: React.DragEvent) => {\n    const target = event.currentTarget as HTMLElement;\n    const related = event.relatedTarget as HTMLElement | null;\n\n    if (related && target.contains(related)) {\n      return;\n    }\n\n    target.removeAttribute('data-drag-over');\n\n    if (dragStateRef.current.currentDropTarget === target) {\n      dragStateRef.current.currentDropTarget = null;\n    }\n  };\n\n  const handleDrop = (event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const target = event.currentTarget as HTMLElement;\n    const position = target.getAttribute('data-drag-over') as TreeDragDropPosition | null;\n    target.removeAttribute('data-drag-over');\n\n    const draggedValue = dragStateRef.current.draggedValue;\n    if (draggedValue && position && draggedValue !== nodeValue) {\n      onDragDrop({ draggedNode: draggedValue, targetNode: nodeValue, position });\n    }\n\n    dragStateRef.current.draggedValue = null;\n    dragStateRef.current.currentDropTarget = null;\n  };\n\n  const handleDragEnd = (event: React.DragEvent) => {\n    const target = event.currentTarget as HTMLElement;\n    target.removeAttribute('data-dragging');\n\n    const prevTarget = dragStateRef.current.currentDropTarget;\n    if (prevTarget) {\n      prevTarget.removeAttribute('data-drag-over');\n    }\n\n    dragStateRef.current.draggedValue = null;\n    dragStateRef.current.currentDropTarget = null;\n  };\n\n  return {\n    draggable: true as const,\n    onDragStart: handleDragStart,\n    onDragOver: handleDragOver,\n    onDragLeave: handleDragLeave,\n    onDrop: handleDrop,\n    onDragEnd: handleDragEnd,\n  };\n}\n"],"mappings":";;;AAYA,SAAS,eACP,MACA,eACA,iBACS;CACT,MAAM,WAAWA,kCAAAA,aAAa,eAAe,KAAK;AAClD,KAAI,CAAC,YAAY,CAAC,SAAS,SACzB,QAAO;CAGT,SAAS,MAAM,OAAgC;AAC7C,OAAK,MAAM,QAAQ,OAAO;AACxB,OAAI,KAAK,UAAU,gBACjB,QAAO;AAGT,OAAI,KAAK,YAAY,MAAM,KAAK,SAAS,CACvC,QAAO;;AAIX,SAAO;;AAGT,QAAO,MAAM,SAAS,SAAS;;AAGjC,SAAS,oBACP,OACA,SACA,aACsB;CACtB,MAAM,OAAO,QAAQ,uBAAuB;CAC5C,MAAM,IAAI,MAAM,UAAU,KAAK;CAC/B,MAAM,SAAS,KAAK;AAEpB,KAAI,aAAa;AACf,MAAI,IAAI,SAAS,IACf,QAAO;AAGT,MAAI,IAAI,SAAS,IACf,QAAO;AAGT,SAAO;;AAGT,KAAI,IAAI,SAAS,GACf,QAAO;AAGT,QAAO;;AAGT,MAAM,mBAA0C,EAAE;AAElD,SAAgB,oBAAoB,EAClC,WACA,aACA,MACA,YACA,gBAC2B;AAC3B,KAAI,CAAC,WACH,QAAO;CAGT,MAAM,mBAAmB,UAA2B;AAClD,QAAM,iBAAiB;AACvB,QAAM,aAAa,gBAAgB;AACnC,QAAM,aAAa,QAAQ,cAAc,UAAU;AACnD,eAAa,QAAQ,eAAe;EAEpC,MAAM,SAAS,MAAM;AACrB,8BAA4B;AAC1B,UAAO,aAAa,iBAAiB,OAAO;IAC5C;;CAGJ,MAAM,kBAAkB,UAA2B;EACjD,MAAM,eAAe,aAAa,QAAQ;AAC1C,MAAI,CAAC,gBAAgB,iBAAiB,UACpC;AAGF,MAAI,eAAe,MAAM,cAAc,UAAU,CAC/C;AAGF,QAAM,gBAAgB;AACtB,QAAM,iBAAiB;AACvB,QAAM,aAAa,aAAa;EAEhC,MAAM,SAAS,MAAM;EACrB,MAAM,WAAW,oBAAoB,OAAO,QAAQ,YAAY;EAEhE,MAAM,aAAa,aAAa,QAAQ;AACxC,MAAI,cAAc,eAAe,OAC/B,YAAW,gBAAgB,iBAAiB;AAG9C,SAAO,aAAa,kBAAkB,SAAS;AAC/C,eAAa,QAAQ,oBAAoB;;CAG3C,MAAM,mBAAmB,UAA2B;EAClD,MAAM,SAAS,MAAM;EACrB,MAAM,UAAU,MAAM;AAEtB,MAAI,WAAW,OAAO,SAAS,QAAQ,CACrC;AAGF,SAAO,gBAAgB,iBAAiB;AAExC,MAAI,aAAa,QAAQ,sBAAsB,OAC7C,cAAa,QAAQ,oBAAoB;;CAI7C,MAAM,cAAc,UAA2B;AAC7C,QAAM,gBAAgB;AACtB,QAAM,iBAAiB;EAEvB,MAAM,SAAS,MAAM;EACrB,MAAM,WAAW,OAAO,aAAa,iBAAiB;AACtD,SAAO,gBAAgB,iBAAiB;EAExC,MAAM,eAAe,aAAa,QAAQ;AAC1C,MAAI,gBAAgB,YAAY,iBAAiB,UAC/C,YAAW;GAAE,aAAa;GAAc,YAAY;GAAW;GAAU,CAAC;AAG5E,eAAa,QAAQ,eAAe;AACpC,eAAa,QAAQ,oBAAoB;;CAG3C,MAAM,iBAAiB,UAA2B;AACjC,QAAM,cACd,gBAAgB,gBAAgB;EAEvC,MAAM,aAAa,aAAa,QAAQ;AACxC,MAAI,WACF,YAAW,gBAAgB,iBAAiB;AAG9C,eAAa,QAAQ,eAAe;AACpC,eAAa,QAAQ,oBAAoB;;AAG3C,QAAO;EACL,WAAW;EACX,aAAa;EACb,YAAY;EACZ,aAAa;EACb,QAAQ;EACR,WAAW;EACZ"}
+{"version":3,"file":"use-tree-node-drag-drop.cjs","names":["findTreeNode"],"sources":["../../../src/components/Tree/use-tree-node-drag-drop.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { findTreeNode } from './get-children-nodes-values/get-children-nodes-values';\nimport type { TreeDragDropPayload, TreeDragDropPosition } from './move-tree-node/move-tree-node';\nimport type { TreeDragState, TreeNodeData } from './Tree';\n\nexport type TreeAllowDrop = (payload: TreeDragDropPayload) => boolean;\n\ninterface UseTreeNodeDragDropInput {\n  nodeValue: string;\n  hasChildren: boolean;\n  data: TreeNodeData[];\n  onDragDrop: ((payload: TreeDragDropPayload) => void) | undefined;\n  dragStateRef: React.RefObject<TreeDragState>;\n  allowDrop: TreeAllowDrop | undefined;\n  withDragHandle: boolean | undefined;\n}\n\nexport interface TreeDragHandleProps {\n  onMouseDown: (event: React.MouseEvent) => void;\n}\n\nfunction isDescendantOf(\n  data: TreeNodeData[],\n  ancestorValue: string,\n  descendantValue: string\n): boolean {\n  const ancestor = findTreeNode(ancestorValue, data);\n  if (!ancestor || !ancestor.children) {\n    return false;\n  }\n\n  function check(nodes: TreeNodeData[]): boolean {\n    for (const node of nodes) {\n      if (node.value === descendantValue) {\n        return true;\n      }\n\n      if (node.children && check(node.children)) {\n        return true;\n      }\n    }\n\n    return false;\n  }\n\n  return check(ancestor.children);\n}\n\nfunction getDragDropPosition(\n  event: React.DragEvent,\n  element: HTMLElement,\n  hasChildren: boolean\n): TreeDragDropPosition {\n  const rect = element.getBoundingClientRect();\n  const y = event.clientY - rect.top;\n  const height = rect.height;\n\n  if (hasChildren) {\n    if (y < height * 0.25) {\n      return 'before';\n    }\n\n    if (y > height * 0.75) {\n      return 'after';\n    }\n\n    return 'inside';\n  }\n\n  if (y < height * 0.5) {\n    return 'before';\n  }\n\n  return 'after';\n}\n\nconst EMPTY_DRAG_PROPS = { elementProps: {}, dragHandleProps: undefined } as const;\n\nexport function useTreeNodeDragDrop({\n  nodeValue,\n  hasChildren,\n  data,\n  onDragDrop,\n  dragStateRef,\n  allowDrop,\n  withDragHandle,\n}: UseTreeNodeDragDropInput) {\n  const [isDragHandleActive, setIsDragHandleActive] = useState(false);\n\n  useEffect(() => {\n    if (!withDragHandle || !isDragHandleActive) {\n      return undefined;\n    }\n\n    const handleWindowMouseUp = () => setIsDragHandleActive(false);\n    window.addEventListener('mouseup', handleWindowMouseUp);\n    return () => window.removeEventListener('mouseup', handleWindowMouseUp);\n  }, [withDragHandle, isDragHandleActive]);\n\n  if (!onDragDrop) {\n    return EMPTY_DRAG_PROPS;\n  }\n\n  const handleDragStart = (event: React.DragEvent) => {\n    if (withDragHandle && !isDragHandleActive) {\n      return;\n    }\n\n    event.stopPropagation();\n    event.dataTransfer.effectAllowed = 'move';\n    event.dataTransfer.setData('text/plain', nodeValue);\n    dragStateRef.current.draggedValue = nodeValue;\n\n    const target = event.currentTarget as HTMLElement;\n    requestAnimationFrame(() => {\n      target.setAttribute('data-dragging', 'true');\n    });\n  };\n\n  const handleDragOver = (event: React.DragEvent) => {\n    const draggedValue = dragStateRef.current.draggedValue;\n    if (!draggedValue || draggedValue === nodeValue) {\n      return;\n    }\n\n    if (isDescendantOf(data, draggedValue, nodeValue)) {\n      return;\n    }\n\n    const target = event.currentTarget as HTMLElement;\n    const position = getDragDropPosition(event, target, hasChildren);\n\n    if (allowDrop && !allowDrop({ draggedNode: draggedValue, targetNode: nodeValue, position })) {\n      const prevTarget = dragStateRef.current.currentDropTarget;\n      if (prevTarget && prevTarget !== target) {\n        prevTarget.removeAttribute('data-drag-over');\n      }\n      target.removeAttribute('data-drag-over');\n      dragStateRef.current.currentDropTarget = null;\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n    event.dataTransfer.dropEffect = 'move';\n\n    const prevTarget = dragStateRef.current.currentDropTarget;\n    if (prevTarget && prevTarget !== target) {\n      prevTarget.removeAttribute('data-drag-over');\n    }\n\n    target.setAttribute('data-drag-over', position);\n    dragStateRef.current.currentDropTarget = target;\n  };\n\n  const handleDragLeave = (event: React.DragEvent) => {\n    const target = event.currentTarget as HTMLElement;\n    const related = event.relatedTarget as HTMLElement | null;\n\n    if (related && target.contains(related)) {\n      return;\n    }\n\n    target.removeAttribute('data-drag-over');\n\n    if (dragStateRef.current.currentDropTarget === target) {\n      dragStateRef.current.currentDropTarget = null;\n    }\n  };\n\n  const handleDrop = (event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const target = event.currentTarget as HTMLElement;\n    const position = target.getAttribute('data-drag-over') as TreeDragDropPosition | null;\n    target.removeAttribute('data-drag-over');\n\n    const draggedValue = dragStateRef.current.draggedValue;\n    if (draggedValue && position && draggedValue !== nodeValue) {\n      const payload = { draggedNode: draggedValue, targetNode: nodeValue, position };\n      if (!allowDrop || allowDrop(payload)) {\n        onDragDrop(payload);\n      }\n    }\n\n    dragStateRef.current.draggedValue = null;\n    dragStateRef.current.currentDropTarget = null;\n  };\n\n  const handleDragEnd = (event: React.DragEvent) => {\n    const target = event.currentTarget as HTMLElement;\n    target.removeAttribute('data-dragging');\n\n    const prevTarget = dragStateRef.current.currentDropTarget;\n    if (prevTarget) {\n      prevTarget.removeAttribute('data-drag-over');\n    }\n\n    dragStateRef.current.draggedValue = null;\n    dragStateRef.current.currentDropTarget = null;\n\n    if (withDragHandle) {\n      setIsDragHandleActive(false);\n    }\n  };\n\n  const elementProps = {\n    draggable: withDragHandle ? isDragHandleActive : true,\n    onDragStart: handleDragStart,\n    onDragOver: handleDragOver,\n    onDragLeave: handleDragLeave,\n    onDrop: handleDrop,\n    onDragEnd: handleDragEnd,\n  };\n\n  const dragHandleProps: TreeDragHandleProps | undefined = withDragHandle\n    ? { onMouseDown: () => setIsDragHandleActive(true) }\n    : undefined;\n\n  return { elementProps, dragHandleProps };\n}\n"],"mappings":"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"}