@edifice.io/react 2.0.0-develop-rc.14 → 2.0.0-develop-rc.15

package/dist/components/Tree/components/SortableTree.js

@@ -0,0 +1,143 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DndContext, DragOverlay } from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import SvgIconFolder from "../../../modules/icons/components/IconFolder.js";
+import SvgIconRafterRight from "../../../modules/icons/components/IconRafterRight.js";
+import { useTree } from "../hooks/useTree.js";
+import { useTreeSortable } from "../hooks/useTreeSortable.js";
+const SortableTree = ({
+  nodes,
+  selectedNodeId: externalSelectedNodeId,
+  showIcon = !1,
+  shouldExpandAllNodes = !1,
+  renderNode,
+  isDisabled = () => !1,
+  onTreeItemClick,
+  onSortable
+}) => {
+  const {
+    selectedNodeId,
+    expandedNodes,
+    handleItemClick,
+    handleFoldUnfold,
+    collapseAllNodes
+  } = useTree({
+    data: nodes,
+    externalSelectedNodeId,
+    shouldExpandAllNodes,
+    onTreeItemClick
+  }), {
+    handleDragEnd,
+    handleDragMove,
+    handleDragOver,
+    handleDragStart,
+    adjustTranslate,
+    sortedIds,
+    indicator,
+    projected,
+    announcements,
+    activeId,
+    indentationWidth,
+    activeItem,
+    dropAnimationConfig,
+    measuring,
+    sensors,
+    items
+  } = useTreeSortable({
+    nodes,
+    onSortable,
+    collapseAllNodes
+  });
+  return /* @__PURE__ */ jsx("div", { className: "treeview", children: /* @__PURE__ */ jsx("ul", { role: "tree", className: "m-0 p-0", children: /* @__PURE__ */ jsxs(DndContext, { accessibility: {
+    announcements
+  }, sensors, measuring, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDragOver: handleDragOver, onDragMove: handleDragMove, children: [
+    /* @__PURE__ */ jsx(SortableContext, { items: sortedIds, strategy: verticalListSortingStrategy, children: Array.isArray(items) && items.map((node) => /* @__PURE__ */ jsx(TreeNode, { node, showIcon, expandedNodes, selectedNodeId, renderNode, disabled: isDisabled(node.id), onTreeItemClick: handleItemClick, onToggleNode: handleFoldUnfold, depth: node.id === activeId && projected ? projected.depth : 0, indentationWidth, projected }, node.id)) }),
+    /* @__PURE__ */ createPortal(/* @__PURE__ */ jsx(DragOverlay, { dropAnimation: dropAnimationConfig, modifiers: indicator ? [adjustTranslate] : void 0, children: activeId && activeItem ? /* @__PURE__ */ jsx(DragOverlayItem, { activeItem }) : null }), document.body)
+  ] }) }) });
+}, TreeNode = /* @__PURE__ */ forwardRef(({
+  node,
+  selectedNodeId,
+  showIcon = !1,
+  expandedNodes,
+  focused,
+  disabled,
+  indentationWidth,
+  depth,
+  isChild,
+  projected,
+  renderNode,
+  onTreeItemClick,
+  onToggleNode
+}, ref) => {
+  var _a;
+  const {
+    t
+  } = useTranslation(), selected = selectedNodeId === node.id, expanded = expandedNodes.has(node.id), animateLayoutChanges = ({
+    isSorting,
+    wasDragging
+  }) => !(isSorting || wasDragging), {
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({
+    id: node.id,
+    disabled,
+    animateLayoutChanges
+  }), style = {
+    transform: CSS.Translate.toString(transform),
+    transition
+  }, treeItemClasses = {
+    action: clsx("action-container d-flex align-items-center gap-8 px-2", {
+      "drag-focus": focused,
+      "border border-secondary rounded rounded-2 shadow bg-white": isDragging
+    }),
+    arrow: clsx({
+      invisible: !Array.isArray(node.children) || node.children.length === 0
+    }),
+    button: clsx("flex-fill d-flex align-items-center text-truncate gap-8", {
+      "py-8": depth === 0,
+      "py-4": depth === 1
+    })
+  }, handleItemKeyDown = (event) => {
+    (event.code === "Enter" || event.code === "Space") && (event.preventDefault(), event.stopPropagation(), onTreeItemClick == null || onTreeItemClick(node.id));
+  }, handleItemToggleKeyDown = (event) => {
+    (event.code === "Enter" || event.code === "Space") && (event.preventDefault(), event.stopPropagation(), onToggleNode == null || onToggleNode(node.id));
+  }, spaceGestion = () => isDragging ? isChild ? depth === 1 ? `${indentationWidth * depth}px` : "0px" : `${indentationWidth * depth}px` : null;
+  return /* @__PURE__ */ jsx("li", { ref: setNodeRef, id: `treeitem-${node.id}`, role: "treeitem", "aria-selected": selected, "aria-expanded": expanded, style: {
+    ...style,
+    marginLeft: spaceGestion()
+  }, ...listeners, children: /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: treeItemClasses.action, children: [
+      /* @__PURE__ */ jsx("div", { className: treeItemClasses.arrow, tabIndex: 0, role: "button", onClick: () => onToggleNode == null ? void 0 : onToggleNode(node.id), onKeyDown: handleItemToggleKeyDown, "aria-label": t("foldUnfold"), children: /* @__PURE__ */ jsx(SvgIconRafterRight, { width: 16, style: {
+        transform: expanded ? "rotate(90deg)" : ""
+      } }) }),
+      node.children && showIcon ? /* @__PURE__ */ jsx(SvgIconFolder, { title: "folder", width: 20, height: 20 }) : null,
+      /* @__PURE__ */ jsx("div", { tabIndex: 0, role: "button", className: treeItemClasses.button, onClick: () => onTreeItemClick(node.id), onKeyDown: handleItemKeyDown, children: renderNode ? renderNode({
+        node,
+        hasChildren: Array.isArray(node.children) && !!node.children.length,
+        isChild
+      }) : /* @__PURE__ */ jsx("div", { className: "text-truncate", children: node.name }) })
+    ] }),
+    expanded && node.children && !!node.children.length && /* @__PURE__ */ jsx("ul", { role: "group", children: (_a = node.children) == null ? void 0 : _a.map((node2) => /* @__PURE__ */ jsx(TreeNode, { ref, node: node2, showIcon, selectedNodeId, expandedNodes, onTreeItemClick, onToggleNode, renderNode, indentationWidth, depth: node2.id === (projected == null ? void 0 : projected.activeId) && projected ? projected.depth : 0, isChild: !0, projected }, node2.id)) })
+  ] }) }, node.id);
+}), DragOverlayItem = /* @__PURE__ */ forwardRef(({
+  activeItem,
+  ...props
+}, ref) => /* @__PURE__ */ jsx("div", { ref, ...props, className: "opacity-0", style: {
+  cursor: "grabbing"
+}, children: /* @__PURE__ */ jsx("div", { className: clsx("action-container align-items-center gap-8 px-2"), style: {
+  backgroundColor: "white",
+  border: "1px solid black",
+  width: "100px"
+}, children: /* @__PURE__ */ jsx("div", { className: clsx("flex-fill d-flex align-items-center text-truncate gap-8 py-8"), children: /* @__PURE__ */ jsx("span", { className: "text-truncate", children: activeItem == null ? void 0 : activeItem.name }) }) }) }));
+export {
+  DragOverlayItem,
+  SortableTree as default
+};

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

@@ -0,0 +1,7 @@
+import { TreeNodeProps, TreeProps } from '../types';
+declare const Tree: {
+    ({ nodes, selectedNodeId: externalSelectedNodeId, showIcon, shouldExpandAllNodes, draggedNode, renderNode, onTreeItemFold, onTreeItemUnfold, onTreeItemClick, }: TreeProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const TreeNode: import('react').ForwardRefExoticComponent<Omit<TreeNodeProps, "ref"> & import('react').RefAttributes<HTMLLIElement>>;
+export default Tree;

package/dist/components/Tree/components/Tree.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, createElement } from "react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import SvgIconFolder from "../../../modules/icons/components/IconFolder.js";
+import SvgIconRafterRight from "../../../modules/icons/components/IconRafterRight.js";
+import { useTree } from "../hooks/useTree.js";
+const Tree = ({
+  nodes,
+  selectedNodeId: externalSelectedNodeId,
+  showIcon = !1,
+  shouldExpandAllNodes = !1,
+  draggedNode,
+  renderNode,
+  onTreeItemFold,
+  onTreeItemUnfold,
+  onTreeItemClick
+}) => {
+  const {
+    selectedNodeId,
+    expandedNodes,
+    siblingsNodes,
+    handleItemClick,
+    handleFoldUnfold
+  } = useTree({
+    data: nodes,
+    externalSelectedNodeId,
+    draggedNode,
+    shouldExpandAllNodes,
+    onTreeItemClick,
+    onTreeItemFold,
+    onTreeItemUnfold
+  });
+  return /* @__PURE__ */ jsx("div", { className: "treeview", children: /* @__PURE__ */ jsx("ul", { role: "tree", className: "m-0 p-0", children: Array.isArray(nodes) ? nodes.map((node) => /* @__PURE__ */ jsx(TreeNode, { node, showIcon, selectedNodeId, expandedNodes, siblingsNodes, onTreeItemClick: handleItemClick, onToggleNode: handleFoldUnfold, renderNode }, node.id)) : /* @__PURE__ */ jsx(TreeNode, { node: nodes, selectedNodeId, expandedNodes, siblingsNodes, showIcon, onTreeItemClick: handleItemClick, onToggleNode: handleFoldUnfold }) }) });
+}, TreeNode = /* @__PURE__ */ forwardRef(({
+  node,
+  selectedNodeId,
+  showIcon = !1,
+  expandedNodes,
+  focused,
+  isChild,
+  renderNode,
+  onTreeItemClick,
+  onToggleNode,
+  ...restProps
+}, ref) => {
+  var _a;
+  const {
+    t
+  } = useTranslation(), selected = selectedNodeId === node.id, expanded = expandedNodes.has(node.id), treeItemClasses = {
+    action: clsx("action-container d-flex align-items-center gap-8 px-2", {
+      "drag-focus": focused,
+      "py-4": !node.section
+    }),
+    arrow: clsx({
+      "py-4": !node.section,
+      "py-8": node.section,
+      invisible: !Array.isArray(node.children) || node.children.length === 0
+    }),
+    button: clsx("flex-fill d-flex align-items-center text-truncate gap-8", {
+      "py-8": node.section
+    })
+  }, handleItemKeyDown = (event) => {
+    (event.code === "Enter" || event.code === "Space") && (event.preventDefault(), event.stopPropagation(), onTreeItemClick == null || onTreeItemClick(node.id));
+  }, handleItemToggleKeyDown = (event) => {
+    (event.code === "Enter" || event.code === "Space") && (event.preventDefault(), event.stopPropagation(), onToggleNode == null || onToggleNode(node.id));
+  };
+  return /* @__PURE__ */ createElement("li", { ...restProps, ref, key: node.id, id: `treeitem-${node.id}`, role: "treeitem", "aria-selected": selected, "aria-expanded": expanded }, /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: treeItemClasses.action, children: [
+      node.children && node.children.length > 0 ? /* @__PURE__ */ jsx("div", { className: treeItemClasses.arrow, tabIndex: 0, role: "button", onClick: () => onToggleNode == null ? void 0 : onToggleNode(node.id), onKeyDown: handleItemToggleKeyDown, "aria-label": t("foldUnfold"), children: /* @__PURE__ */ jsx(SvgIconRafterRight, { width: 16, style: {
+        transform: expanded ? "rotate(90deg)" : ""
+      } }) }) : /* @__PURE__ */ jsx("div", { className: "py-8 invisible" }),
+      node.children && showIcon ? /* @__PURE__ */ jsx(SvgIconFolder, { title: "folder", width: 20, height: 20 }) : null,
+      /* @__PURE__ */ jsx("div", { tabIndex: 0, role: "button", className: treeItemClasses.button, onClick: () => onTreeItemClick(node.id), onKeyDown: handleItemKeyDown, children: renderNode ? renderNode({
+        node,
+        hasChildren: Array.isArray(node.children) && !!node.children.length,
+        isChild
+      }) : /* @__PURE__ */ jsx("div", { className: "text-truncate", children: node.name }) })
+    ] }),
+    expanded && node.children && !!node.children.length && /* @__PURE__ */ jsx("ul", { role: "group", children: (_a = node.children) == null ? void 0 : _a.map((node2) => /* @__PURE__ */ createElement(TreeNode, { ...restProps, ref, node: node2, key: node2.id, showIcon, selectedNodeId, expandedNodes, onTreeItemClick, onToggleNode, renderNode, isChild: !0 })) })
+  ] }));
+});
+export {
+  TreeNode,
+  Tree as default
+};

package/dist/components/Tree/hooks/useTree.d.ts

@@ -0,0 +1,31 @@
+import { TreeItem } from '../types';
+export declare const useTree: ({ data, externalSelectedNodeId, draggedNode, shouldExpandAllNodes, onTreeItemUnfold, onTreeItemFold, onTreeItemClick, }: {
+    data: TreeItem | TreeItem[];
+    externalSelectedNodeId?: string | null;
+    draggedNode?: {
+        isOver: boolean;
+        overId: string | undefined;
+        isTreeview: boolean;
+    };
+    shouldExpandAllNodes?: boolean;
+    /**
+     * Callback function to provide unfolded item to parent component
+     */
+    onTreeItemUnfold?: (nodeId: string) => void;
+    /**
+     * Callback function to provide folded item to parent component
+     */
+    onTreeItemFold?: (nodeId: string) => void;
+    /**
+     * Callback function to provide selected item to parent component
+     */
+    onTreeItemClick?: (nodeId: string) => void;
+}) => {
+    selectedNodeId: string | null | undefined;
+    expandedNodes: Set<string>;
+    siblingsNodes: import('react').MutableRefObject<Set<string>>;
+    draggedNodeId: string | undefined;
+    handleItemClick: (nodeId: string) => void;
+    handleFoldUnfold: (nodeId: string) => void;
+    collapseAllNodes: () => void;
+};

package/dist/components/Tree/hooks/useTree.js

@@ -0,0 +1,87 @@
+import { useState, useRef, useEffect } from "react";
+import { findNodeById, findPathById } from "../utilities/tree.js";
+const useTree = ({
+  data,
+  externalSelectedNodeId,
+  draggedNode,
+  shouldExpandAllNodes,
+  onTreeItemUnfold,
+  onTreeItemFold,
+  onTreeItemClick
+}) => {
+  const [internalSelectedNodeId, setInternalSelectedNodeId] = useState(void 0), [expandedNodes, setExpandedNodes] = useState(/* @__PURE__ */ new Set()), siblingsNodes = useRef(/* @__PURE__ */ new Set()), [draggedNodeId, setDraggedNodeId] = useState(void 0), selectedNodeId = internalSelectedNodeId ?? externalSelectedNodeId;
+  function addNodesWithSiblingHavingChildren(data2) {
+    var _a;
+    Array.isArray(data2) ? data2.forEach((node) => {
+      const resultSet = new Set(siblingsNodes.current);
+      data2.filter(({
+        id
+      }) => id !== node.id).some((sibling) => sibling.children && sibling.children.length > 0) && resultSet.add(node.id), node.children && node.children.length > 0 && node.children.forEach((child) => {
+        var _a2;
+        const childSiblings = (_a2 = node.children) == null ? void 0 : _a2.filter(({
+          id
+        }) => id !== child.id);
+        (childSiblings == null ? void 0 : childSiblings.some((sibling) => sibling.children && sibling.children.length > 0)) && resultSet.add(child.id), addNodesWithSiblingHavingChildren(child);
+      });
+    }) : (_a = data2.children) == null || _a.forEach((child) => {
+      var _a2;
+      const resultSet = new Set(siblingsNodes.current), siblings = (_a2 = data2.children) == null ? void 0 : _a2.filter((c) => c.id !== child.id);
+      (siblings == null ? void 0 : siblings.some((sibling) => sibling.children && sibling.children.length > 0)) && (resultSet.add(child.id), siblingsNodes.current = resultSet), addNodesWithSiblingHavingChildren(child);
+    });
+  }
+  const expandAllNodes = (shouldExpandAllNodes2) => {
+    const initExpandedNodes = new Set("");
+    data && Array.isArray(data) && shouldExpandAllNodes2 && (data.forEach((node) => initExpandedNodes.add(node.id)), setExpandedNodes(initExpandedNodes));
+  };
+  useEffect(() => {
+    data && addNodesWithSiblingHavingChildren(data);
+  }, [data]), useEffect(() => {
+    draggedNode != null && draggedNode.isOver && draggedNode.isTreeview ? (draggedNode.overId && handleItemDrag(draggedNode.overId), setDraggedNodeId(draggedNode.overId)) : setDraggedNodeId(void 0);
+  }, [draggedNode]), useEffect(() => {
+    shouldExpandAllNodes && expandAllNodes(shouldExpandAllNodes);
+  }, [data, shouldExpandAllNodes]), useEffect(() => {
+    externalSelectedNodeId && !shouldExpandAllNodes ? (handleExternalSelectedNodeId(externalSelectedNodeId), setInternalSelectedNodeId(externalSelectedNodeId)) : setInternalSelectedNodeId(void 0);
+  }, [externalSelectedNodeId]);
+  const handleExternalSelectedNodeId = (nodeId) => {
+    if (!findNodeById(data, selectedNodeId)) {
+      setInternalSelectedNodeId(void 0);
+      return;
+    }
+    if (externalSelectedNodeId === "default") {
+      expandedNodes.forEach((node) => onTreeItemUnfold == null ? void 0 : onTreeItemUnfold(node));
+      return;
+    }
+    handleExpandNode(nodeId);
+  }, handleExpandNode = (nodeId) => {
+    const updatedExpandedNodes = new Set(expandedNodes), parents = findPathById(data, nodeId), arrayOrder = Array.from(updatedExpandedNodes);
+    parents.forEach((parent) => {
+      const index = arrayOrder.indexOf(parent);
+      index > -1 && arrayOrder.splice(index, 1), arrayOrder.push(parent);
+    }), updatedExpandedNodes.clear(), arrayOrder.forEach((node) => updatedExpandedNodes.add(node)), updatedExpandedNodes.forEach((node) => onTreeItemUnfold == null ? void 0 : onTreeItemUnfold(node)), setExpandedNodes(updatedExpandedNodes);
+  }, handleCollapseNode = (nodeId) => {
+    const updatedExpandedNodes = new Set(expandedNodes);
+    updatedExpandedNodes.delete(nodeId), updatedExpandedNodes.forEach((node) => onTreeItemFold == null ? void 0 : onTreeItemFold(node)), setExpandedNodes(updatedExpandedNodes);
+  }, handleToggleNode = (nodeId) => {
+    expandedNodes.has(nodeId) ? handleCollapseNode(nodeId) : handleExpandNode(nodeId);
+  }, handleSelectedItem = (nodeId) => {
+    selectedNodeId !== nodeId && setInternalSelectedNodeId(nodeId);
+  }, handleItemClick = (nodeId) => {
+    handleSelectedItem(nodeId), handleExpandNode(nodeId), onTreeItemClick == null || onTreeItemClick(nodeId);
+  }, handleFoldUnfold = (nodeId) => handleToggleNode(nodeId), handleItemDrag = (nodeId) => {
+    findNodeById(data, externalSelectedNodeId) && handleCollapseNode(nodeId);
+  };
+  return {
+    selectedNodeId,
+    expandedNodes,
+    siblingsNodes,
+    draggedNodeId,
+    handleItemClick,
+    handleFoldUnfold,
+    collapseAllNodes: () => {
+      setExpandedNodes(/* @__PURE__ */ new Set());
+    }
+  };
+};
+export {
+  useTree
+};

package/dist/components/Tree/hooks/useTreeSortable.d.ts

@@ -0,0 +1,38 @@
+import { Announcements, DragEndEvent, DragMoveEvent, DragOverEvent, DragStartEvent, MeasuringStrategy, Modifier, UniqueIdentifier } from '@dnd-kit/core';
+import { FlattenedItem, TreeItem, UpdateTreeData } from '../types';
+export declare const useTreeSortable: ({ nodes, onSortable, collapseAllNodes, }: {
+    nodes: TreeItem[];
+    onSortable: (updateArray: UpdateTreeData[]) => void;
+    collapseAllNodes: () => void;
+}) => {
+    handleDragStart: (event: DragStartEvent) => void;
+    handleDragMove: ({ delta }: DragMoveEvent) => void;
+    handleDragOver: (event: DragOverEvent) => void;
+    handleDragEnd: (event: DragEndEvent) => void;
+    adjustTranslate: Modifier;
+    sortedIds: string[];
+    indicator: boolean;
+    activationConstraint: {
+        delay: number;
+        tolerance: number;
+    };
+    projected: {
+        depth: number;
+        parentId: string | null;
+        activeId: UniqueIdentifier;
+        previousItem: FlattenedItem;
+    } | null;
+    announcements: Announcements;
+    activeId: string | null;
+    indentationWidth: number;
+    activeItem: FlattenedItem | null | undefined;
+    dropAnimationConfig: import('@dnd-kit/core/dist/components/DragOverlay/hooks/useDropAnimation').DropAnimationOptions;
+    measuring: {
+        droppable: {
+            strategy: MeasuringStrategy;
+        };
+    };
+    sensors: import('@dnd-kit/core').SensorDescriptor<import('@dnd-kit/core').SensorOptions>[];
+    items: TreeItem[];
+    flattenedTree: FlattenedItem[];
+};

package/dist/components/Tree/hooks/useTreeSortable.js

@@ -0,0 +1,202 @@
+import { MeasuringStrategy, useSensors, useSensor, PointerSensor, KeyboardSensor, defaultDropAnimation } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates, arrayMove } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { useState, useEffect, useMemo } from "react";
+import { flattenTree, getProjection, getActiveAndOverNodes, determineNewParentId, getIndicesToUpdate, updateParentIds, buildTree, generateUpdateData } from "../utilities/tree-sortable.js";
+const useTreeSortable = ({
+  nodes,
+  onSortable,
+  collapseAllNodes
+}) => {
+  const [items, setItems] = useState(() => nodes), [activeId, setActiveId] = useState(null), [overId, setOverId] = useState(null), [offsetLeft, setOffsetLeft] = useState(0), [currentPosition, setCurrentPosition] = useState(null);
+  useEffect(() => {
+    setItems(nodes);
+  }, [nodes]);
+  const activationConstraint = {
+    delay: 200,
+    tolerance: 5
+  }, indicator = !1, indentationWidth = 64, flattenedTree = useMemo(
+    () => flattenTree(items, null),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [items]
+  ), activeItem = activeId ? flattenedTree.find(({
+    id
+  }) => id === activeId) : null, projected = activeId && overId ? getProjection(flattenedTree, activeId, overId, offsetLeft, indentationWidth) : null;
+  function handleDragStart(event) {
+    const {
+      active
+    } = event, {
+      activeNode
+    } = getActiveAndOverNodes(flattenedTree, active.id);
+    activeNode.parentId || collapseAllNodes(), setActiveId(active.id), setOverId(active.id);
+    const activeItem2 = flattenedTree.find(({
+      id
+    }) => id === activeId);
+    activeItem2 && setCurrentPosition({
+      parentId: activeItem2.parentId,
+      overId: activeId
+    });
+  }
+  function handleDragMove({
+    delta
+  }) {
+    setOffsetLeft(delta.x);
+  }
+  function handleDragOver(event) {
+    const {
+      over
+    } = event;
+    setOverId(over == null ? void 0 : over.id);
+  }
+  function handleDragEnd(event) {
+    const {
+      active,
+      over
+    } = event, {
+      activeNode,
+      activeNodeIndex,
+      overNode,
+      overNodeIndex
+    } = getActiveAndOverNodes(flattenedTree, active.id, over == null ? void 0 : over.id), newParentId = determineNewParentId(active, over, activeNode, overNode, projected), indicesToUpdate = getIndicesToUpdate(activeNode, activeNodeIndex, flattenedTree, projected);
+    updateParentIds(flattenedTree, indicesToUpdate, newParentId);
+    const updatedFlattenedTree = arrayMove(flattenedTree, activeNodeIndex, overNodeIndex), updatedTree = buildTree(updatedFlattenedTree), {
+      updateArray
+    } = generateUpdateData(updatedFlattenedTree, updatedTree);
+    setItems(updatedTree), setActiveId(null), setOverId(null), onSortable(updateArray);
+  }
+  const sortedIds = useMemo(() => flattenedTree.map(({
+    id
+  }) => id), [flattenedTree]);
+  function getMovementAnnouncement(eventName, activeId2, overId2) {
+    if (overId2 && projected) {
+      if (eventName !== "onDragEnd") {
+        if (currentPosition && projected.parentId === currentPosition.parentId && overId2 === currentPosition.overId)
+          return;
+        setCurrentPosition({
+          parentId: projected.parentId,
+          overId: overId2
+        });
+      }
+      const clonedItems = JSON.parse(JSON.stringify(flattenTree(items, null, 0))), overIndex = clonedItems.findIndex(({
+        id
+      }) => id === overId2), activeIndex = clonedItems.findIndex(({
+        id
+      }) => id === activeId2), sortedItems = arrayMove(clonedItems, activeIndex, overIndex), previousItem = sortedItems[overIndex - 1];
+      let announcement;
+      const movedVerb = eventName === "onDragEnd" ? "dropped" : "moved", nestedVerb = eventName === "onDragEnd" ? "dropped" : "nested";
+      if (previousItem)
+        if (projected.depth > previousItem.depth)
+          announcement = `${activeId2} was ${nestedVerb} under ${previousItem.id}.`;
+        else {
+          let previousSibling = previousItem;
+          for (; previousSibling && projected.depth < previousSibling.depth; ) {
+            const parentId = previousSibling.parentId;
+            previousSibling = sortedItems.find(({
+              id
+            }) => id === parentId);
+          }
+          previousSibling && (announcement = `${activeId2} was ${movedVerb} after ${previousSibling.id}.`);
+        }
+      else {
+        const nextItem = sortedItems[overIndex + 1];
+        nextItem ? announcement = `${activeId2} was ${movedVerb} before ${nextItem.id}.` : announcement = `${activeId2} was ${movedVerb} as the only item in the list.`;
+      }
+      return announcement;
+    }
+  }
+  const announcements = {
+    onDragStart({
+      active
+    }) {
+      return `Picked up ${active.id}.`;
+    },
+    onDragMove({
+      active,
+      over
+    }) {
+      return getMovementAnnouncement("onDragMove", active.id, over == null ? void 0 : over.id);
+    },
+    onDragOver({
+      active,
+      over
+    }) {
+      return getMovementAnnouncement("onDragOver", active.id, over == null ? void 0 : over.id);
+    },
+    onDragEnd({
+      active,
+      over
+    }) {
+      return getMovementAnnouncement("onDragEnd", active.id, over == null ? void 0 : over.id);
+    },
+    onDragCancel({
+      active
+    }) {
+      return `Moving was cancelled. ${active.id} was dropped in its original position.`;
+    }
+  }, dropAnimationConfig = {
+    keyframes({
+      transform
+    }) {
+      return [{
+        opacity: 1,
+        transform: CSS.Transform.toString(transform.initial)
+      }, {
+        opacity: 0,
+        transform: CSS.Transform.toString({
+          ...transform.final,
+          x: transform.final.x + 5,
+          y: transform.final.y + 5
+        })
+      }];
+    },
+    easing: "ease-out",
+    sideEffects({
+      active
+    }) {
+      active.node.animate([{
+        opacity: 0
+      }, {
+        opacity: 1
+      }], {
+        duration: defaultDropAnimation.duration,
+        easing: defaultDropAnimation.easing
+      });
+    }
+  }, adjustTranslate = ({
+    transform
+  }) => ({
+    ...transform,
+    y: transform.y - 25
+  }), measuring = {
+    droppable: {
+      strategy: MeasuringStrategy.Always
+    }
+  }, sensors = useSensors(useSensor(PointerSensor, {
+    activationConstraint
+  }), useSensor(KeyboardSensor, {
+    coordinateGetter: sortableKeyboardCoordinates
+  }));
+  return {
+    handleDragStart,
+    handleDragMove,
+    handleDragOver,
+    handleDragEnd,
+    adjustTranslate,
+    sortedIds,
+    indicator,
+    activationConstraint,
+    projected,
+    announcements,
+    activeId,
+    indentationWidth,
+    activeItem,
+    dropAnimationConfig,
+    measuring,
+    sensors,
+    items,
+    flattenedTree
+  };
+};
+export {
+  useTreeSortable
+};

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

@@ -0,0 +1,6 @@
+export { default as SortableTree } from './components/SortableTree';
+export { default as DndTree } from './components/DndTree';
+export { default as Tree } from './components/Tree';
+export * from './hooks/useTreeSortable';
+export * from './types';
+export * from './utilities/tree-sortable';