react-native-tree-multi-select 3.0.0-beta.3 → 3.0.0-beta.4

package/src/components/DragOverlay.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { type ComponentType } from "react";
 import { Animated, StyleSheet, View } from "react-native";
 
 import type {
@@ -10,8 +10,12 @@ import type {
 import { CheckboxView } from "./CheckboxView";
 import { CustomExpandCollapseIcon } from "./CustomExpandCollapseIcon";
 import { defaultIndentationMultiplier } from "../constants/treeView.constants";
+import { getTreeViewStore } from "../store/treeView.store";
+import { getCheckboxValue } from "../helpers";
+import { typedMemo } from "../utils/typedMemo";
 
 interface DragOverlayProps<ID> extends TreeItemCustomizations<ID> {
+    storeId: string;
     overlayY: Animated.Value;
     overlayX: Animated.Value;
     node: __FlattenedTreeNode__<ID>;
@@ -21,18 +25,24 @@ interface DragOverlayProps<ID> extends TreeItemCustomizations<ID> {
 
 function _DragOverlay<ID>(props: DragOverlayProps<ID>) {
     const {
+        storeId,
         overlayY,
         overlayX,
         node,
         level,
         indentationMultiplier = defaultIndentationMultiplier,
-        CheckboxComponent = CheckboxView as React.ComponentType<CheckBoxViewProps>,
+        CheckboxComponent = CheckboxView as ComponentType<CheckBoxViewProps>,
         ExpandCollapseIconComponent = CustomExpandCollapseIcon,
         CustomNodeRowComponent,
         checkBoxViewStyleProps,
         dragDropCustomizations,
     } = props;
 
+    // Read the actual checked state for the dragged node
+    const store = getTreeViewStore<ID>(storeId);
+    const { checked, indeterminate } = store.getState();
+    const checkedValue = getCheckboxValue(checked.has(node.id), indeterminate.has(node.id));
+
     const overlayStyleProps = dragDropCustomizations?.dragOverlayStyleProps;
     const CustomOverlay = dragDropCustomizations?.CustomDragOverlayComponent;
 
@@ -52,13 +62,16 @@ function _DragOverlay<ID>(props: DragOverlayProps<ID>) {
                 { transform: [{ translateX: overlayX }, { translateY: overlayY }] },
             ]}
         >
+            {/* Render priority: CustomDragOverlayComponent > CustomNodeRowComponent > built-in.
+               The overlay is display-only (pointerEvents="none" on parent), so handlers are no-ops.
+               isExpanded is always false because useDragDrop collapses the node at drag start. */}
             {CustomOverlay ? (
-                <CustomOverlay node={node} level={level} />
+                <CustomOverlay node={node} level={level} checkedValue={checkedValue} />
             ) : CustomNodeRowComponent ? (
                 <CustomNodeRowComponent
                     node={node}
                     level={level}
-                    checkedValue={false}
+                    checkedValue={checkedValue}
                     isExpanded={false}
                     onCheck={() => {}}
                     onExpand={() => {}}
@@ -73,7 +86,7 @@ function _DragOverlay<ID>(props: DragOverlayProps<ID>) {
                     <CheckboxComponent
                         text={node.name}
                         onValueChange={() => {}}
-                        value={false}
+                        value={checkedValue}
                         {...checkBoxViewStyleProps}
                     />
                     {node.children?.length ? (
@@ -87,7 +100,7 @@ function _DragOverlay<ID>(props: DragOverlayProps<ID>) {
     );
 }
 
-export const DragOverlay = React.memo(_DragOverlay) as typeof _DragOverlay;
+export const DragOverlay = typedMemo(_DragOverlay);
 
 const styles = StyleSheet.create({
     overlay: {

package/src/components/DropIndicator.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { memo } from "react";
 import { Animated, View, StyleSheet } from "react-native";
 import type { DropPosition } from "../types/dragDrop.types";
 
@@ -10,7 +10,7 @@ interface DropIndicatorProps {
     indentationMultiplier: number;
 }
 
-export const DropIndicator = React.memo(function DropIndicator(
+export const DropIndicator = memo(function DropIndicator(
     props: DropIndicatorProps
 ) {
     const {

package/src/components/NodeList.tsx

@@ -1,4 +1,10 @@
-import React from "react";
+import {
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from "react";
 import {
     View,
     StyleSheet,
@@ -9,7 +15,6 @@ import {
 import { FlashList } from "@shopify/flash-list";
 
 import type {
-    CheckboxValueType,
     __FlattenedTreeNode__,
     DropIndicatorStyleProps,
     NodeListProps,
@@ -21,6 +26,7 @@ import { useTreeViewStore } from "../store/treeView.store";
 import {
     getFilteredTreeData,
     getFlattenedTreeData,
+    getCheckboxValue,
     getInnerMostChildrenIdsInTree,
     handleToggleExpand,
     toggleCheckboxes
@@ -29,10 +35,13 @@ import { CheckboxView } from "./CheckboxView";
 import { CustomExpandCollapseIcon } from "./CustomExpandCollapseIcon";
 import { DragOverlay } from "./DragOverlay";
 import type { DropPosition } from "../types/dragDrop.types";
-import { defaultIndentationMultiplier } from "../constants/treeView.constants";
+import {
+    defaultIndentationMultiplier,
+    listHeaderFooterPadding
+} from "../constants/treeView.constants";
 import { useShallow } from "zustand/react/shallow";
 import { typedMemo } from "../utils/typedMemo";
-import { ScrollToNodeHandler } from "../handlers/ScrollToNodeHandler";
+import { useScrollToNode } from "../hooks/useScrollToNode";
 import { useDragDrop } from "../hooks/useDragDrop";
 
 const NodeList = typedMemo(_NodeList);
@@ -54,15 +63,29 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
         ExpandCollapseTouchableComponent,
         CustomNodeRowComponent,
 
-        dragEnabled,
+        dragAndDrop,
+    } = props;
+
+    const {
+        enabled: _dragEnabled,
+        onDragStart,
         onDragEnd,
+        onDragCancel,
         longPressDuration = 400,
         autoScrollThreshold = 60,
         autoScrollSpeed = 1.0,
         dragOverlayOffset = -4,
         autoExpandDelay = 800,
-        dragDropCustomizations,
-    } = props;
+        customizations: dragDropCustomizations,
+        canDrop: canDropCallback,
+        maxDepth,
+        canNodeHaveChildren,
+        canDrag,
+    } = dragAndDrop ?? {};
+
+    // When the dragAndDrop prop is provided, drag is enabled by default.
+    // Users can still toggle it off with enabled: false at runtime.
+    const dragEnabled = dragAndDrop ? (_dragEnabled ?? true) : false;
 
     const {
         expanded,
@@ -80,34 +103,43 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
         })
     ));
 
-    const flashListRef = React.useRef<FlashList<__FlattenedTreeNode__<ID>> | null>(null);
-    const containerRef = React.useRef<View>(null);
-    const internalDataRef = React.useRef<TreeNode<ID>[] | null>(null);
-    const measuredItemHeightRef = React.useRef(0);
+    const flashListRef = useRef<FlashList<__FlattenedTreeNode__<ID>> | null>(null);
+    const containerRef = useRef<View>(null);
+    const internalDataRef = useRef<TreeNode<ID>[] | null>(null);
+    const measuredItemHeightRef = useRef(0);
 
-    const handleItemLayout = React.useCallback((height: number) => {
+    const handleItemLayout = useCallback((height: number) => {
         if (measuredItemHeightRef.current === 0 && height > 0) {
             measuredItemHeightRef.current = height;
         }
     }, []);
 
-    const [initialScrollIndex, setInitialScrollIndex] = React.useState<number>(-1);
+    const [initialScrollIndex, setInitialScrollIndex] = useState<number>(-1);
 
     // First we filter the tree as per the search term and keys
-    const filteredTree = React.useMemo(() => getFilteredTreeData<ID>(
+    const filteredTree = useMemo(() => getFilteredTreeData<ID>(
         initialTreeViewData,
         searchText.trim().toLowerCase(),
         searchKeys
     ), [initialTreeViewData, searchText, searchKeys]);
 
     // Then we flatten the tree to make it "render-compatible" in a "flat" list
-    const flattenedFilteredNodes = React.useMemo(() => getFlattenedTreeData<ID>(
+    const flattenedFilteredNodes = useMemo(() => getFlattenedTreeData<ID>(
         filteredTree,
         expanded,
     ), [filteredTree, expanded]);
 
+    useScrollToNode<ID>({
+        storeId,
+        scrollToNodeHandlerRef,
+        flashListRef,
+        flattenedFilteredNodes,
+        setInitialScrollIndex,
+        initialScrollNodeID,
+    });
+
     // And update the innermost children id -> required to un/select filtered tree
-    React.useEffect(() => {
+    useEffect(() => {
         const updatedInnerMostChildrenIds = getInnerMostChildrenIdsInTree<ID>(
             filteredTree
         );
@@ -133,8 +165,10 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
         flattenedNodes: flattenedFilteredNodes,
         flashListRef,
         containerRef,
-        dragEnabled: dragEnabled ?? false,
+        dragEnabled,
+        onDragStart,
         onDragEnd,
+        onDragCancel,
         longPressDuration,
         autoScrollThreshold,
         autoScrollSpeed,
@@ -143,10 +177,14 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
         dragOverlayOffset,
         autoExpandDelay,
         indentationMultiplier: effectiveIndentationMultiplier,
+        canDrop: canDropCallback,
+        maxDepth,
+        canNodeHaveChildren,
+        canDrag,
     });
 
     // Combined onScroll handler
-    const handleScroll = React.useCallback((
+    const handleScroll = useCallback((
         event: NativeSyntheticEvent<NativeScrollEvent>
     ) => {
         scrollOffsetRef.current = event.nativeEvent.contentOffset.y;
@@ -156,7 +194,7 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
         treeFlashListProps?.onScroll?.(event as any);
     }, [scrollOffsetRef, cancelLongPressTimer, treeFlashListProps]);
 
-    const nodeRenderer = React.useCallback((
+    const nodeRenderer = useCallback((
         { item, index }: { item: __FlattenedTreeNode__<ID>; index: number; }
     ) => {
         return (
@@ -223,14 +261,6 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
 
     return (
         <>
-            <ScrollToNodeHandler
-                ref={scrollToNodeHandlerRef}
-                storeId={storeId}
-                flashListRef={flashListRef}
-                flattenedFilteredNodes={flattenedFilteredNodes}
-                setInitialScrollIndex={setInitialScrollIndex}
-                initialScrollNodeID={initialScrollNodeID} />
-
             {dragEnabled ? (
                 <View
                     ref={containerRef}
@@ -240,6 +270,7 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
                     {flashListElement}
                     {isDragging && draggedNode && (
                         <DragOverlay<ID>
+                            storeId={storeId}
                             overlayY={overlayY}
                             overlayX={overlayX}
                             node={draggedNode}
@@ -262,22 +293,10 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
 
 function HeaderFooterView() {
     return (
-        <View style={styles.defaultHeaderFooter} />
+        <View style={{ padding: listHeaderFooterPadding }} />
     );
 }
 
-function getValue(
-    isChecked: boolean,
-    isIndeterminate: boolean
-): CheckboxValueType {
-    if (isIndeterminate) {
-        return "indeterminate";
-    } else if (isChecked) {
-        return true;
-    } else {
-        return false;
-    }
-}
 
 const Node = typedMemo(_Node);
 function _Node<ID>(props: NodeProps<ID>) {
@@ -315,7 +334,7 @@ function _Node<ID>(props: NodeProps<ID>) {
     } = useTreeViewStore<ID>(storeId)(useShallow(
         state => ({
             isExpanded: state.expanded.has(node.id),
-            value: getValue(
+            value: getCheckboxValue(
                 state.checked.has(node.id),
                 state.indeterminate.has(node.id)
             ),
@@ -332,45 +351,51 @@ function _Node<ID>(props: NodeProps<ID>) {
     // The flag is set during render (synchronous) and cleared on the next touch start.
     // It is also cleared via effect when dragging ends, to prevent stale `true`
     // values surviving FlashList recycling (where refs persist across items).
-    const wasDraggedRef = React.useRef(false);
+    const wasDraggedRef = useRef(false);
     if (isDraggingGlobal && isBeingDragged) {
         wasDraggedRef.current = true;
     }
 
-    React.useEffect(() => {
+    useEffect(() => {
         if (!isDraggingGlobal) {
             wasDraggedRef.current = false;
         }
     }, [isDraggingGlobal]);
 
-    const _onToggleExpand = React.useCallback(() => {
+    const _onToggleExpand = useCallback(() => {
         if (wasDraggedRef.current) return;
         handleToggleExpand(storeId, node.id);
     }, [storeId, node.id]);
 
-    const _onCheck = React.useCallback(() => {
+    const _onCheck = useCallback(() => {
         if (wasDraggedRef.current) return;
         toggleCheckboxes(storeId, [node.id]);
     }, [storeId, node.id]);
 
-    const handleTouchStart = React.useCallback((e: any) => {
+    const handleTouchStart = useCallback((e: any) => {
         wasDraggedRef.current = false;
         if (!onNodeTouchStart) return;
         const { pageY, locationY } = e.nativeEvent;
         onNodeTouchStart(node.id, pageY, locationY, nodeIndex);
     }, [node.id, nodeIndex, onNodeTouchStart]);
 
-    const handleTouchEnd = React.useCallback(() => {
+    const handleTouchEnd = useCallback(() => {
         onNodeTouchEnd?.();
     }, [onNodeTouchEnd]);
 
-    // Determine opacity for drag state
-    const dragOpacity = dragDropCustomizations?.draggedNodeOpacity ?? 0.3;
-    const nodeOpacity = (isDraggingGlobal && (isBeingDragged || isDragInvalid))
-        ? dragOpacity
-        : 1.0;
-
-    const handleLayout = React.useCallback((e: any) => {
+    // Determine opacity for drag state (separate values for dragged node vs invalid targets).
+    // When CustomNodeRowComponent is used, hand off all visual control
+    // (including drag opacity) to the custom component — it receives
+    // isDraggedNode / isInvalidDropTarget / isDragging props.
+    const draggedOpacity = dragDropCustomizations?.draggedNodeOpacity ?? 0.3;
+    const invalidOpacity = dragDropCustomizations?.invalidTargetOpacity ?? 0.3;
+    const nodeOpacity = CustomNodeRowComponent
+        ? 1.0
+        : isDraggingGlobal
+            ? (isBeingDragged ? draggedOpacity : isDragInvalid ? invalidOpacity : 1.0)
+            : 1.0;
+
+    const handleLayout = useCallback((e: any) => {
         onItemLayout?.(e.nativeEvent.layout.height);
     }, [onItemLayout]);
 
@@ -424,7 +449,6 @@ function _Node<ID>(props: NodeProps<ID>) {
     else {
         return (
             <View
-                {...touchHandlers}
                 onLayout={onItemLayout ? handleLayout : undefined}
                 style={[
                     { opacity: nodeOpacity },
@@ -439,9 +463,12 @@ function _Node<ID>(props: NodeProps<ID>) {
                     isExpanded={isExpanded}
                     onCheck={_onCheck}
                     onExpand={_onToggleExpand}
-                    isDragTarget={isDragInvalid}
+                    isInvalidDropTarget={isDragInvalid}
+                    isDropTarget={isDropTarget}
+                    dropPosition={nodeDropPosition ?? undefined}
                     isDragging={isDraggingGlobal}
                     isDraggedNode={isBeingDragged}
+                    dragHandleProps={touchHandlers}
                 />
             </View>
         );
@@ -511,9 +538,6 @@ function NodeDropIndicator({ position, level, indentationMultiplier, styleProps
 }
 
 const styles = StyleSheet.create({
-    defaultHeaderFooter: {
-        padding: 5
-    },
     nodeExpandableArrowTouchable: {
         flex: 1
     },

package/src/constants/treeView.constants.ts

@@ -1 +1,4 @@
-export const defaultIndentationMultiplier = 15;
+export const defaultIndentationMultiplier = 15;
+
+/** Padding used by the FlashList header/footer component. Total header height = 2 * this value. */
+export const listHeaderFooterPadding = 5;

package/src/helpers/expandCollapse.helper.ts

@@ -49,8 +49,8 @@ export function handleToggleExpand<ID>(storeId: string, id: ID) {
 /**
  * Expand all nodes in the tree.
  */
-export function expandAll(storeId: string) {
-    const treeViewStore = getTreeViewStore(storeId);
+export function expandAll<ID>(storeId: string) {
+    const treeViewStore = getTreeViewStore<ID>(storeId);
     const { nodeMap, updateExpanded } = treeViewStore.getState();
     // Create a new Set containing the IDs of all nodes
     const newExpanded = new Set(nodeMap.keys());
@@ -60,11 +60,11 @@ export function expandAll(storeId: string) {
 /**
  * Collapse all nodes in the tree.
  */
-export function collapseAll(storeId: string) {
-    const treeViewStore = getTreeViewStore(storeId);
+export function collapseAll<ID>(storeId: string) {
+    const treeViewStore = getTreeViewStore<ID>(storeId);
     const { updateExpanded } = treeViewStore.getState();
     // Clear the expanded state
-    updateExpanded(new Set<string>());
+    updateExpanded(new Set());
 }
 
 /**

package/src/helpers/moveTreeNode.helper.ts

@@ -18,6 +18,9 @@ export function moveTreeNode<ID>(
 ): TreeNode<ID>[] {
     if (draggedNodeId === targetNodeId) return data;
 
+    // Prevent moving a node into its own descendant (would create a cycle)
+    if (isDescendant(data, draggedNodeId, targetNodeId)) return data;
+
     // Step 1: Deep clone the tree
     const cloned = deepCloneTree(data);
 
@@ -32,6 +35,36 @@ export function moveTreeNode<ID>(
     return cloned;
 }
 
+/**
+ * Check if `candidateDescendantId` is a descendant of `ancestorId` in the tree.
+ */
+function isDescendant<ID>(
+    nodes: TreeNode<ID>[],
+    ancestorId: ID,
+    candidateDescendantId: ID,
+): boolean {
+    for (const node of nodes) {
+        if (node.id === ancestorId) {
+            // Found the ancestor — search its subtree for the candidate
+            return containsNode(node.children ?? [], candidateDescendantId);
+        }
+        if (node.children && isDescendant(node.children, ancestorId, candidateDescendantId)) {
+            return true;
+        }
+    }
+    return false;
+}
+
+/** Check if a node with the given ID exists anywhere in the subtree. */
+function containsNode<ID>(nodes: TreeNode<ID>[], nodeId: ID): boolean {
+    for (const node of nodes) {
+        if (node.id === nodeId) return true;
+        if (node.children && containsNode(node.children, nodeId)) return true;
+    }
+    return false;
+}
+
+/** Deep clone a tree structure so mutations don't affect the original. */
 function deepCloneTree<ID>(nodes: TreeNode<ID>[]): TreeNode<ID>[] {
     return nodes.map(node => ({
         ...node,

package/src/helpers/selectAll.helper.ts

@@ -7,13 +7,13 @@ import { toggleCheckboxes } from "./toggleCheckbox.helper";
  *
  * If there is no search text, then it selects all nodes; otherwise, it selects all visible nodes.
  */
-export function selectAllFiltered(storeId: string) {
-    const treeViewStore = getTreeViewStore(storeId);
+export function selectAllFiltered<ID>(storeId: string) {
+    const treeViewStore = getTreeViewStore<ID>(storeId);
     const { searchText, innerMostChildrenIds } = treeViewStore.getState();
 
     // If there's no search text, select all nodes
     if (!searchText) {
-        selectAll(storeId);
+        selectAll<ID>(storeId);
     } else {
         // If there's search text, only select the visible nodes
         toggleCheckboxes(storeId, innerMostChildrenIds, true);
@@ -25,13 +25,13 @@ export function selectAllFiltered(storeId: string) {
  *
  * If there is no search text, then it unselects all nodes; otherwise, it unselects all visible nodes.
  */
-export function unselectAllFiltered(storeId: string) {
-    const treeViewStore = getTreeViewStore(storeId);
+export function unselectAllFiltered<ID>(storeId: string) {
+    const treeViewStore = getTreeViewStore<ID>(storeId);
     const { searchText, innerMostChildrenIds } = treeViewStore.getState();
 
     // If there's no search text, unselect all nodes
     if (!searchText) {
-        unselectAll(storeId);
+        unselectAll<ID>(storeId);
     } else {
         // If there's search text, only unselect the visible nodes
         toggleCheckboxes(storeId, innerMostChildrenIds, false);
@@ -43,8 +43,8 @@ export function unselectAllFiltered(storeId: string) {
  *
  * This function selects all nodes by adding all node ids to the checked set and clearing the indeterminate set.
  */
-export function selectAll(storeId: string) {
-    const treeViewStore = getTreeViewStore(storeId);
+export function selectAll<ID>(storeId: string) {
+    const treeViewStore = getTreeViewStore<ID>(storeId);
     const {
         nodeMap,
         updateChecked,
@@ -64,8 +64,8 @@ export function selectAll(storeId: string) {
  *
  * This function unselects all nodes by clearing both the checked and indeterminate sets.
  */
-export function unselectAll(storeId: string) {
-    const treeViewStore = getTreeViewStore(storeId);
+export function unselectAll<ID>(storeId: string) {
+    const treeViewStore = getTreeViewStore<ID>(storeId);
     const { updateChecked, updateIndeterminate } = treeViewStore.getState();
     // Update the state to mark all nodes as unchecked