diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..883eb61
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+**/node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100644
index 0000000..c5a8731
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,2 @@
+yarn lint
+yarn format
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..1fa183d
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,9 @@
+{
+ "singleQuote": true,
+ "trailingComma": "all",
+ "jsxBracketSameLine": true,
+ "printWidth": 120,
+ "tabWidth": 2,
+ "jsxSingleQuote": true,
+ "endOfLine": "lf"
+}
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..1d06762
--- /dev/null
+++ b/README.md
@@ -0,0 +1,28 @@
+# React Dnd Tree Sortable
+
+## Introduce
+
+[dnd-tree-sortable](https://vitejs.github.io/vite-plugin-react-pages) is a React component. It is very suitable for:
+
+- Drag and Drop Tree data
+- Virtualized list to optimize performance
+- Large data
+
+## Required:
+
+- react: ^18.3.1
+- react-dom: ^18.3.1
+
+## Tech
+
+It built base on [dnd-kit-example](https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/story/examples-tree-sortable--all-features):
+
+- **[Dnd kit](https://docs.dndkit.com/)**. A lightweight, modular, performant, accessible and extensible drag & drop toolkit for React.
+- **[virtuoso](https://virtuoso.dev/)**. is a set of React components that display large data sets using virtualized rendering. The Virtuoso components automatically handle items with variable sizes and changes in items' sizes.
+- **[rc-scrollbars](https://rc-scrollbars.vercel.app/)**.
+
+## Getting stated
+
+```(bash)
+npm i dnd-tree-sortable
+```
diff --git a/api-examples.md b/api-examples.md
new file mode 100644
index 0000000..691df9c
--- /dev/null
+++ b/api-examples.md
@@ -0,0 +1,55 @@
+---
+outline: deep
+---
+
+# Runtime API Examples
+
+This page demonstrates usage of some of the runtime APIs provided by VitePress.
+
+The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
+
+```md
+
+
+## Results
+
+### Theme Data
+
+{{ theme }}
+
+### Page Data
+
+{{ page }}
+
+### Page Frontmatter
+
+{{ frontmatter }}
+```
+
+
+
+## Results
+
+### Theme Data
+
+{{ theme }}
+
+### Page Data
+
+{{ page }}
+
+### Page Frontmatter
+
+{{ frontmatter }}
+
+## More
+
+Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..22ce4e5
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,12 @@
+
+
+
+ Dnd Tree Sortable
+
+
+
+
+
+
diff --git a/docs/package.json b/docs/package.json
new file mode 100644
index 0000000..1742f63
--- /dev/null
+++ b/docs/package.json
@@ -0,0 +1,6 @@
+{
+ "name": "docs",
+ "private": true,
+ "version": "1.0.0",
+ "type": "module"
+}
diff --git a/docs/pages/$.mdx b/docs/pages/$.mdx
new file mode 100644
index 0000000..ca95970
--- /dev/null
+++ b/docs/pages/$.mdx
@@ -0,0 +1,7 @@
+---
+title: Introduction
+---
+
+import README from '../../README.md';
+
+Dnd Tree Sortable
,
+ topNavs: [
+ {
+ label: 'Home',
+ path: '/',
+ activeIfMatch: {
+ // match all first-level paths
+ path: '/:foo',
+ end: true,
+ },
+ },
+ {
+ label: 'Examples',
+ path: '/examples/Basic',
+ activeIfMatch: '/examples',
+ },
+ {
+ label: 'Github',
+ href: 'https://github.com/',
+ },
+ ],
+ Component404,
+ sideNavs: (ctx) => {
+ return defaultSideNavs(ctx, {
+ groupConfig: {
+ examples: {
+ demos: {
+ label: 'Demos (dev only)',
+ order: 1,
+ },
+ },
+ },
+ });
+ },
+});
diff --git a/docs/pages/examples/Basic/$.mdx b/docs/pages/examples/Basic/$.mdx
new file mode 100644
index 0000000..0fe45c4
--- /dev/null
+++ b/docs/pages/examples/Basic/$.mdx
@@ -0,0 +1,8 @@
+---
+title: Basic
+order: 1
+---
+
+# Basic usage
+
+
+
+
+
+ );
+};
+
+const ItemContent = (props: TreeItem) => {
+ return (
+
+ {props.id} ({props.children.length})
+
+ );
+};
+
+const CustomComponents = () => {
+ return (
+
+ {value.id} ({value.children.length})
+
+ );
+};
+
+const CustomItem = () => {
+ return ;
+
+const generateTree = (childPerNode: number, deep: number, parentId: TreeItem['id'], totalRoot?: number) => {
+ const nodes: TreeItem[] = [];
+ const currDeep = parentId.toString().split('-').length;
+ if (currDeep === deep) {
+ return [];
+ }
+ for (let i = 1; i <= (totalRoot ?? childPerNode); i++) {
+ const node: TreeItem = {
+ id: `${parentId}-${i}`,
+ children: generateTree(getRandomInRange(0, childPerNode), deep, `${parentId}-${i}`),
+ text: `${parentId}-${i}`,
+ };
+ nodes.push(node);
+ }
+
+ return nodes;
+};
+
+const tree = generateTree(10, 6, 'Node', 20);
+
+const ItemContent = (props: TreeItem) => {
+ return (
+
+ {props.text} ({props.children.length})
+
+ );
+};
+
+const CustomItemData = () => {
+ return (
+
+ defaultItems={tree}
+ height={600}
+ collapsible
+ indicator
+ components={{
+ ItemContent,
+ }}
+ />
+ );
+};
+
+export default CustomItemData;
diff --git a/docs/pages/examples/Indicator/$.mdx b/docs/pages/examples/Indicator/$.mdx
new file mode 100644
index 0000000..4fb8bce
--- /dev/null
+++ b/docs/pages/examples/Indicator/$.mdx
@@ -0,0 +1,8 @@
+---
+title: Indicator
+order: 2
+---
+
+# Indicator
+
+ alert(`Remove id: ${id}`)}
+ />
+ );
+};
+
+export default Removable;
diff --git a/docs/pages/examples/styles.module.css b/docs/pages/examples/styles.module.css
new file mode 100644
index 0000000..5a3e12d
--- /dev/null
+++ b/docs/pages/examples/styles.module.css
@@ -0,0 +1,13 @@
+.btn {
+ background-color: #fff;
+ border: 1px solid #ddd;
+ padding: 0.25rem;
+}
+
+.border-none {
+ border: none;
+}
+
+.grab {
+ cursor: grab;
+}
diff --git a/docs/pages/examples/utils.ts b/docs/pages/examples/utils.ts
new file mode 100644
index 0000000..297fcaa
--- /dev/null
+++ b/docs/pages/examples/utils.ts
@@ -0,0 +1,52 @@
+import { TreeItem } from 'dnd-tree-sortable';
+
+/**
+ * Generates a random number between the specified min and max values, inclusive.
+ * @param min - The minimum number (inclusive).
+ * @param max - The maximum number (inclusive).
+ * @returns A random number between min and max.
+ */
+export const getRandomInRange = (min: number, max: number): number => {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+
+export const generateNode = (childPerNode: number, deep: number, parentId: TreeItem['id']): TreeItem[] => {
+ const currDeep = parentId.toString().split('-');
+ if (currDeep.length - 1 >= deep) {
+ return [];
+ }
+ const nodes: TreeItem[] = [];
+ for (let i = 1; i < childPerNode + 1; i++) {
+ const node: TreeItem = {
+ id: `${parentId}-${i}`,
+ children: generateNode(getRandomInRange(0, childPerNode), deep, `${parentId}-${i}`),
+ };
+ nodes.push(node);
+ }
+
+ return nodes;
+};
+
+/**
+ * Genrate tree
+ */
+export const generateTree = (rootTotal: number, deep: number, childPerNode: number) => {
+ const root: TreeItem[] = [];
+ for (let i = 1; i < rootTotal + 1; i++) {
+ const node: TreeItem = {
+ id: `Node-${i}`,
+ children: generateNode(getRandomInRange(0, childPerNode), deep, `Node-${i}`),
+ };
+ root.push(node);
+ }
+ return root;
+};
+
+export const tree = generateTree(20, 6, 10);
+
+export const classNames = (...classes: Array) => {
+ return classes
+ .filter((c) => c !== undefined && c !== null)
+ .map((c) => (typeof c === 'string' ? c : c.toString()))
+ .join(' ');
+};
diff --git a/docs/pages/guide$.mdx b/docs/pages/guide$.mdx
new file mode 100644
index 0000000..b1d9003
--- /dev/null
+++ b/docs/pages/guide$.mdx
@@ -0,0 +1,70 @@
+---
+title: API
+order: 4
+---
+
+# API
+
+## `SortableTreeProps`
+
+```ts
+interface SortableTreeProps {
+ collapsible?: boolean;
+ defaultItems?: TreeItem[];
+ indentationWidth?: number;
+ indicator?: boolean;
+ removable?: boolean;
+ components?: SortableTreeItemProps>['components'];
+ height?: string | number;
+ renderItemContent?: SortableTreeItemProps>['renderItem'];
+ onChange?: (currentItem: FlattenedItem, changeItem: FlattenedItem) => void;
+ onRemove?: (id: UniqueIdentifier) => void;
+}
+```
+
+## `TreeItem`
+
+```ts
+type TreeItem = T & {
+ id: UniqueIdentifier;
+ collapsed?: boolean;
+ children: TreeItem[];
+};
+```
+
+## `FlattenedItem`
+
+```ts
+type FlattenedItem = TreeItem & {
+ parentId: UniqueIdentifier | null;
+ depth: number;
+ index: number;
+};
+```
+
+## `RenderComponentType`
+
+```ts
+type RenderComponentType = {
+ Handle?: (props: ActionProps) => JSX.Element;
+ Collapse?: (props: ActionProps) => JSX.Element;
+ Remove?: (props: ActionProps) => JSX.Element;
+ ItemContent?: (props: T) => JSX.Element;
+ Badge?: (props: BadgeProps) => JSX.Element;
+};
+```
+
+## `SortableTree`
+
+| Property | Description | Type | Default |
+| ----------------- | ------------------------- | ------------------------------------------------------------------------ | ----------- |
+| collapsible | Enable collapsible mode. | `boolean` | `false` |
+| indicator | Enable indicator mode. | `boolean` | `false` |
+| removable | Enable removable mode. | `boolean` | `false` |
+| indentationWidth | Set indentationWidth. | `number` | `50` |
+| height | Set view height. | `string` or `number` | `undefined` |
+| defaultItems | Item data | `TreeItem[]` | [] |
+| components | Custom components of item | [RenderComponentType](#rendercomponenttype) | `undefined` |
+| renderItemContent | Custom render content | `(props: Omit>, "id">) => JSX.Element` | `undefined` |
+| onChange | Handle change item | `(currentItem: FlattenedItem, changeItem: FlattenedItem) => void` | `undefined` |
+| onRemove | Handle remove item | `(id: UniqueIdentifier) => void` | `undefined` |
diff --git a/docs/pages/vite-env.d.ts b/docs/pages/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/docs/pages/vite-env.d.ts
@@ -0,0 +1 @@
+/// Vite + React + TS
+
+
+
+
+
+
diff --git a/index.md b/index.md
new file mode 100644
index 0000000..56e2909
--- /dev/null
+++ b/index.md
@@ -0,0 +1,24 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+ name: 'Dnd Tree Sortable'
+ text: 'A VitePress Site'
+ tagline: My great project tagline
+ actions:
+ - theme: brand
+ text: Markdown Examples
+ link: /markdown-examples
+ - theme: alt
+ text: API Examples
+ link: /api-examples
+
+features:
+ - title: Feature A
+ details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+ - title: Feature B
+ details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+ - title: Feature C
+ details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+---
diff --git a/lib/SortableTree.tsx b/lib/SortableTree.tsx
new file mode 100644
index 0000000..d0050f9
--- /dev/null
+++ b/lib/SortableTree.tsx
@@ -0,0 +1,299 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import {
+ Announcements,
+ DndContext,
+ closestCenter,
+ KeyboardSensor,
+ PointerSensor,
+ useSensor,
+ useSensors,
+ DragStartEvent,
+ DragOverlay,
+ DragMoveEvent,
+ DragEndEvent,
+ DragOverEvent,
+ UniqueIdentifier,
+} from '@dnd-kit/core';
+import { SortableContext, arrayMove, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { Virtuoso } from 'react-virtuoso';
+
+import {
+ buildTree,
+ flattenTree,
+ getProjection,
+ getChildCount,
+ removeItem,
+ removeChildrenOf,
+ setProperty,
+ adjustTranslate,
+ getAnnouncement,
+} from './utilities';
+import type { FlattenedItem, PositionType, SensorContext, TreeItem } from './types';
+import { sortableTreeKeyboardCoordinates } from './keyboardCoordinates';
+import { SortableTreeItem, SortableTreeItemProps, VirtuosoScrollbars } from './components';
+import { dropAnimationConfig, measuring } from './constants';
+
+export interface SortableTreeProps {
+ collapsible?: boolean;
+ defaultItems?: TreeItem[];
+ indentationWidth?: number;
+ indicator?: boolean;
+ removable?: boolean;
+ components?: SortableTreeItemProps>['components'];
+ height?: string | number;
+ renderItemContent?: SortableTreeItemProps>['renderItem'];
+ onChange?: (currentItem: FlattenedItem, changeItem: FlattenedItem) => void;
+ onRemove?: (id: UniqueIdentifier) => void;
+}
+
+export const SortableTree = ({
+ collapsible,
+ defaultItems = [],
+ indicator = false,
+ indentationWidth = 50,
+ removable,
+ components,
+ height,
+ renderItemContent,
+ onChange,
+ onRemove,
+}: SortableTreeProps) => {
+ const [items, setItems] = useState(() => defaultItems);
+ const [activeId, setActiveId] = useState(null);
+ const [overId, setOverId] = useState(null);
+ const [offsetLeft, setOffsetLeft] = useState(0);
+ const [currentPosition, setCurrentPosition] = useState(null);
+
+ const flattenedItems = useMemo(() => {
+ const flattenedTree = flattenTree(items);
+ const collapsedItems = flattenedTree.reduce(
+ (acc, { children, collapsed, id }) => (collapsed && children.length ? [...acc, id] : acc),
+ [],
+ );
+
+ return removeChildrenOf(flattenedTree, activeId ? [activeId, ...collapsedItems] : collapsedItems);
+ }, [activeId, items]);
+
+ const projected = useMemo(() => {
+ if (activeId && overId) {
+ return getProjection(flattenedItems, activeId, overId, offsetLeft, indentationWidth);
+ }
+ return null;
+ }, [activeId, flattenedItems, indentationWidth, offsetLeft, overId]);
+
+ const sensorContext: SensorContext> = useRef({
+ items: flattenedItems,
+ offset: offsetLeft,
+ });
+ const [coordinateGetter] = useState(() =>
+ sortableTreeKeyboardCoordinates(sensorContext, indicator, indentationWidth),
+ );
+ const sensors = useSensors(
+ useSensor(PointerSensor),
+ useSensor(KeyboardSensor, {
+ coordinateGetter,
+ }),
+ );
+
+ const sortedIds = useMemo(() => flattenedItems.map(({ id }) => id), [flattenedItems]);
+ const activeItem = useMemo(
+ () => (activeId ? flattenedItems.find(({ id }) => id === activeId) : null),
+ [activeId, flattenedItems],
+ );
+
+ useEffect(() => {
+ sensorContext.current = {
+ items: flattenedItems,
+ offset: offsetLeft,
+ };
+ }, [flattenedItems, offsetLeft]);
+
+ const announcements: Announcements = {
+ onDragStart({ active }) {
+ return `Picked up ${active.id}.`;
+ },
+ onDragMove({ active, over }) {
+ return getMovementAnnouncement('onDragMove', active.id, over?.id);
+ },
+ onDragOver({ active, over }) {
+ return getMovementAnnouncement('onDragOver', active.id, over?.id);
+ },
+ onDragEnd({ active, over }) {
+ return getMovementAnnouncement('onDragEnd', active.id, over?.id);
+ },
+ onDragCancel({ active }) {
+ return `Moving was cancelled. ${active.id} was dropped in its original position.`;
+ },
+ };
+
+ const handleDragStart = useCallback(
+ ({ active: { id: activeId } }: DragStartEvent) => {
+ setActiveId(activeId);
+ setOverId(activeId);
+
+ const activeItem = flattenedItems.find(({ id }) => id === activeId);
+
+ if (activeItem) {
+ setCurrentPosition({
+ parentId: activeItem.parentId,
+ overId: activeId,
+ });
+ }
+
+ document.body.style.setProperty('cursor', 'grabbing');
+ },
+ [flattenedItems],
+ );
+
+ const handleDragMove = useCallback(({ delta }: DragMoveEvent) => {
+ setOffsetLeft(delta.x);
+ }, []);
+
+ const handleDragOver = useCallback(({ over }: DragOverEvent) => {
+ setOverId(over?.id ?? null);
+ }, []);
+
+ const resetState = useCallback(() => {
+ setOverId(null);
+ setActiveId(null);
+ setOffsetLeft(0);
+ setCurrentPosition(null);
+
+ document.body.style.setProperty('cursor', '');
+ }, []);
+
+ const handleDragEnd = useCallback(
+ ({ active, over }: DragEndEvent) => {
+ resetState();
+
+ if (projected && over) {
+ const { depth, parentId } = projected;
+ const clonedItems: FlattenedItem[] = JSON.parse(JSON.stringify(flattenTree(items)));
+ const overIndex = clonedItems.findIndex(({ id }) => id === over.id);
+ const activeIndex = clonedItems.findIndex(({ id }) => id === active.id);
+ const activeTreeItem = clonedItems[activeIndex];
+
+ clonedItems[activeIndex] = { ...activeTreeItem, depth, parentId };
+
+ const sortedItems = arrayMove(clonedItems, activeIndex, overIndex);
+ const newItems = buildTree(sortedItems);
+ onChange?.(activeTreeItem, sortedItems[overIndex]);
+ setItems(newItems);
+ }
+ },
+ [items, onChange, projected, resetState],
+ );
+
+ const handleDragCancel = useCallback(() => {
+ resetState();
+ }, [resetState]);
+
+ const handleRemove = useCallback(
+ (id: UniqueIdentifier) => {
+ setItems((items) => removeItem(items, id));
+ onRemove?.(id);
+ },
+ [onRemove],
+ );
+
+ const handleCollapse = useCallback((id: UniqueIdentifier) => {
+ setItems((items) =>
+ setProperty(items, id, 'collapsed', (value) => {
+ return !value as TreeItem['collapsed'];
+ }),
+ );
+ }, []);
+
+ const getMovementAnnouncement = useCallback(
+ (eventName: string, activeId: UniqueIdentifier, overId?: UniqueIdentifier) => {
+ if (overId && projected) {
+ const canNotSetPosition =
+ currentPosition && projected.parentId === currentPosition.parentId && overId === currentPosition.overId;
+ if (eventName !== 'onDragEnd' && !canNotSetPosition) {
+ setCurrentPosition({
+ parentId: projected.parentId,
+ overId,
+ });
+ }
+
+ return getAnnouncement(eventName, overId, activeId, items, projected);
+ }
+ },
+ [currentPosition, items, projected],
+ );
+
+ const renderItem = useCallback(
+ (_: number, item: FlattenedItem) => {
+ const { id, children, collapsed, depth } = item;
+ return (
+ >
+ key={id}
+ id={id}
+ value={item}
+ depth={id === activeId && projected ? projected.depth : depth}
+ indentationWidth={indentationWidth}
+ indicator={indicator}
+ collapsed={Boolean(collapsed && children.length)}
+ onCollapse={collapsible && children.length ? () => handleCollapse(id) : undefined}
+ onRemove={removable ? () => handleRemove(id) : undefined}
+ components={components}
+ renderItem={renderItemContent}
+ />
+ );
+ },
+ [
+ activeId,
+ collapsible,
+ components,
+ handleCollapse,
+ handleRemove,
+ indentationWidth,
+ indicator,
+ projected,
+ removable,
+ renderItemContent,
+ ],
+ );
+
+ return (
+
+
+
+ {activeId && activeItem ? (
+ ,
+ document.body,
+ )}
+
+
+ );
+};
diff --git a/lib/components/Action/Action.module.scss b/lib/components/Action/Action.module.scss
new file mode 100644
index 0000000..87211d3
--- /dev/null
+++ b/lib/components/Action/Action.module.scss
@@ -0,0 +1,51 @@
+$focused-outline-color: #4c9ffe;
+
+.Action {
+ display: flex;
+ width: 12px;
+ padding: 15px;
+ align-items: center;
+ justify-content: center;
+ flex: 0 0 auto;
+ touch-action: none;
+ cursor: var(--cursor, pointer);
+ border-radius: 5px;
+ border: none;
+ outline: none;
+ appearance: none;
+ background-color: transparent;
+ -webkit-tap-highlight-color: transparent;
+
+ @media (hover: hover) {
+ &:hover {
+ background-color: var(--action-background, rgba(0, 0, 0, 0.05));
+
+ svg {
+ fill: #6f7b88;
+ }
+ }
+ }
+
+ svg {
+ flex: 0 0 auto;
+ margin: auto;
+ height: 100%;
+ overflow: visible;
+ fill: #919eab;
+ }
+
+ &:active {
+ background-color: var(--background, rgba(0, 0, 0, 0.05));
+
+ svg {
+ fill: var(--fill, #788491);
+ }
+ }
+
+ &:focus-visible {
+ outline: none;
+ box-shadow:
+ 0 0 0 2px rgba(255, 255, 255, 0),
+ 0 0px 0px 2px $focused-outline-color;
+ }
+}
diff --git a/lib/components/Action/Action.tsx b/lib/components/Action/Action.tsx
new file mode 100644
index 0000000..e5bff0d
--- /dev/null
+++ b/lib/components/Action/Action.tsx
@@ -0,0 +1,30 @@
+import React, { CSSProperties } from 'react';
+import classNames from 'clsx';
+
+import styles from './Action.module.scss';
+
+export interface ActionProps extends React.HTMLAttributes {
+ active?: {
+ fill: string;
+ background: string;
+ };
+ cursor?: CSSProperties['cursor'];
+}
+
+export const Action = ({ active, className, cursor, style, ...props }: ActionProps) => {
+ return (
+
+
+
+
+ );
+};
diff --git a/lib/components/Handle/index.ts b/lib/components/Handle/index.ts
new file mode 100644
index 0000000..316aeed
--- /dev/null
+++ b/lib/components/Handle/index.ts
@@ -0,0 +1 @@
+export { Handle } from './Handle';
diff --git a/lib/components/Icons/CollapseIcon.tsx b/lib/components/Icons/CollapseIcon.tsx
new file mode 100644
index 0000000..1fe41aa
--- /dev/null
+++ b/lib/components/Icons/CollapseIcon.tsx
@@ -0,0 +1,7 @@
+export const CollapseIcon = (props: React.SVGProps) => {
+ return (
+
+
+ );
+};
diff --git a/lib/components/Icons/index.ts b/lib/components/Icons/index.ts
new file mode 100644
index 0000000..0b81a61
--- /dev/null
+++ b/lib/components/Icons/index.ts
@@ -0,0 +1 @@
+export * from './CollapseIcon';
diff --git a/lib/components/Remove/Remove.tsx b/lib/components/Remove/Remove.tsx
new file mode 100644
index 0000000..48ca0e7
--- /dev/null
+++ b/lib/components/Remove/Remove.tsx
@@ -0,0 +1,17 @@
+import { Action, ActionProps } from '../Action';
+
+export const Remove = (props: ActionProps) => {
+ return (
+
+
+
+
+ );
+};
diff --git a/lib/components/Remove/index.ts b/lib/components/Remove/index.ts
new file mode 100644
index 0000000..b7c2fb2
--- /dev/null
+++ b/lib/components/Remove/index.ts
@@ -0,0 +1 @@
+export { Remove } from './Remove';
diff --git a/lib/components/Scroll/Scrollbars.module.css b/lib/components/Scroll/Scrollbars.module.css
new file mode 100644
index 0000000..ae1126f
--- /dev/null
+++ b/lib/components/Scroll/Scrollbars.module.css
@@ -0,0 +1,4 @@
+.Scroll {
+ background-color: #bdbdbd;
+ border-radius: 4px;
+}
diff --git a/lib/components/Scroll/Scrollbars.tsx b/lib/components/Scroll/Scrollbars.tsx
new file mode 100644
index 0000000..60852d7
--- /dev/null
+++ b/lib/components/Scroll/Scrollbars.tsx
@@ -0,0 +1,58 @@
+import { memo, forwardRef, useCallback, useMemo } from 'react';
+import { Scrollbars } from 'rc-scrollbars';
+import type { MutableRefObject, CSSProperties, ReactNode } from 'react';
+import type { ScrollValues } from 'rc-scrollbars';
+
+import styles from './Scrollbars.module.css';
+
+export type CustomScrollbarsProps = {
+ overflowX?: boolean;
+ style?: CSSProperties;
+ children?: ReactNode;
+ onScroll?: (values: ScrollValues) => void;
+ renderView?: typeof Scrollbars.defaultProps.renderView;
+ renderTrackHorizontal?: typeof Scrollbars.defaultProps.renderTrackHorizontal;
+ autoHide?: boolean;
+};
+
+const CustomScrollbars = forwardRef(function CustomScrollbars(
+ { children, style, onScroll, overflowX, renderView, ...props },
+ ref,
+) {
+ const scrollbarsStyle = useMemo(() => ({ ...style, flexGrow: 1, overflowY: 'hidden' }), [style]);
+
+ const refSetter = useCallback(
+ (scrollbarRef: Scrollbars) => {
+ if (ref && scrollbarRef) {
+ if (typeof ref === 'function') {
+ ref(scrollbarRef.view ?? null);
+ return;
+ }
+
+ (ref as MutableRefObject).current = scrollbarRef.view;
+ }
+ },
+ [ref],
+ );
+
+ return (
+
+ }
+ renderThumbVertical={({ style, ...props }) =>
}
+ ref={refSetter}
+ >
+ {children}
+
+ );
+});
+
+export default memo(CustomScrollbars);
diff --git a/lib/components/Scroll/VirtuosoScrollbars.tsx b/lib/components/Scroll/VirtuosoScrollbars.tsx
new file mode 100644
index 0000000..48d5260
--- /dev/null
+++ b/lib/components/Scroll/VirtuosoScrollbars.tsx
@@ -0,0 +1,23 @@
+import type { ComponentProps, Ref } from 'react';
+import { forwardRef } from 'react';
+
+import CustomScrollbars from './Scrollbars';
+
+type VirtuosoScrollbarsProps = ComponentProps;
+
+const VirtuosoScrollbars = forwardRef(function VirtuosoScrollbars(
+ { style, children, ...props }: VirtuosoScrollbarsProps,
+ ref: Ref,
+) {
+ return (
+
}
+ >
+ {children}
+
+ );
+});
+
+export { VirtuosoScrollbars };
diff --git a/lib/components/Scroll/index.ts b/lib/components/Scroll/index.ts
new file mode 100644
index 0000000..7c5ab9b
--- /dev/null
+++ b/lib/components/Scroll/index.ts
@@ -0,0 +1 @@
+export * from './VirtuosoScrollbars';
diff --git a/lib/components/TreeItem/Badge.tsx b/lib/components/TreeItem/Badge.tsx
new file mode 100644
index 0000000..dc25c6c
--- /dev/null
+++ b/lib/components/TreeItem/Badge.tsx
@@ -0,0 +1,11 @@
+import styles from './TreeItem.module.css';
+
+export type BadgeProps = {
+ count: number;
+};
+
+const Badge = (props: BadgeProps) => {
+ return {props.count} ;
+};
+
+export { Badge };
diff --git a/lib/components/TreeItem/DefaultContent.tsx b/lib/components/TreeItem/DefaultContent.tsx
new file mode 100644
index 0000000..3fbc6e0
--- /dev/null
+++ b/lib/components/TreeItem/DefaultContent.tsx
@@ -0,0 +1,8 @@
+import { TreeItem } from '../../types';
+import styles from './TreeItem.module.css';
+
+const DefaultContent = ({ id }: T) => {
+ return {id} ;
+};
+
+export { DefaultContent };
diff --git a/lib/components/TreeItem/SortableTreeItem.tsx b/lib/components/TreeItem/SortableTreeItem.tsx
new file mode 100644
index 0000000..62ecdf3
--- /dev/null
+++ b/lib/components/TreeItem/SortableTreeItem.tsx
@@ -0,0 +1,61 @@
+import { CSSProperties, memo } from 'react';
+import type { UniqueIdentifier } from '@dnd-kit/core';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+import { TreeItem, TreeItemProps } from './TreeItem';
+import { animateLayoutChanges, iOS } from '../../utilities';
+import { TreeItem as TreeItemType } from '../../types';
+
+export interface SortableTreeItemProps extends TreeItemProps {
+ id: UniqueIdentifier;
+ renderItem?: (props: Omit, 'id'>) => JSX.Element;
+}
+
+const SortableTreeItemComponent = ({
+ id,
+ depth,
+ renderItem,
+ ...props
+}: SortableTreeItemProps) => {
+ const {
+ attributes,
+ isDragging,
+ isSorting,
+ listeners,
+ setDraggableNodeRef,
+ setDroppableNodeRef,
+ transform,
+ transition,
+ } = useSortable({
+ id,
+ animateLayoutChanges,
+ });
+ const style: CSSProperties = {
+ transform: CSS.Translate.toString(transform),
+ transition,
+ };
+
+ const itemProps = {
+ ref: setDraggableNodeRef,
+ wrapperRef: setDroppableNodeRef,
+ style: style,
+ depth: depth,
+ ghost: isDragging,
+ disableSelection: iOS,
+ disableInteraction: isSorting,
+ handleProps: {
+ ...attributes,
+ ...listeners,
+ },
+ ...props,
+ };
+
+ if (typeof renderItem === 'function') {
+ return renderItem(itemProps);
+ }
+
+ return {...itemProps} />;
+};
+
+export const SortableTreeItem = memo(SortableTreeItemComponent) as unknown as typeof SortableTreeItemComponent;
diff --git a/lib/components/TreeItem/TreeItem.module.css b/lib/components/TreeItem/TreeItem.module.css
new file mode 100644
index 0000000..649c9d9
--- /dev/null
+++ b/lib/components/TreeItem/TreeItem.module.css
@@ -0,0 +1,127 @@
+.Wrapper {
+ list-style: none;
+ box-sizing: border-box;
+ padding-left: var(--spacing);
+ margin-bottom: -1px;
+
+ &.clone {
+ display: inline-block;
+ pointer-events: none;
+ padding: 0;
+ padding-left: 10px;
+ padding-top: 5px;
+
+ .TreeItem {
+ --vertical-padding: 5px;
+
+ padding-right: 24px;
+ border-radius: 4px;
+ box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1);
+ }
+ }
+
+ &.ghost {
+ &.indicator {
+ opacity: 1;
+ position: relative;
+ z-index: 1;
+ margin-bottom: -1px;
+
+ .TreeItem {
+ position: relative;
+ padding: 0;
+ height: 8px;
+ border-color: #2389ff;
+ background-color: #56a1f8;
+
+ &:before {
+ position: absolute;
+ left: -8px;
+ top: -4px;
+ display: block;
+ content: '';
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ border: 1px solid #2389ff;
+ background-color: #ffffff;
+ }
+
+ > * {
+ /* Items are hidden using height and opacity to retain focus */
+ opacity: 0;
+ height: 0;
+ }
+ }
+ }
+
+ &:not(.indicator) {
+ opacity: 0.5;
+ }
+
+ .TreeItem > * {
+ box-shadow: none;
+ background-color: transparent;
+ }
+ }
+}
+
+.TreeItem {
+ --vertical-padding: 10px;
+
+ position: relative;
+ display: flex;
+ align-items: center;
+ padding: var(--vertical-padding) 10px;
+ background-color: #fff;
+ border: 1px solid #dedede;
+ color: #222;
+ box-sizing: border-box;
+}
+
+.Text {
+ flex-grow: 1;
+ padding-left: 0.5rem;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+.Count {
+ position: absolute;
+ top: -10px;
+ right: -10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ background-color: #2389ff;
+ font-size: 0.8rem;
+ font-weight: 600;
+ color: #fff;
+}
+
+.disableInteraction {
+ pointer-events: none;
+}
+
+.disableSelection,
+.clone {
+ .Text,
+ .Count {
+ user-select: none;
+ -webkit-user-select: none;
+ }
+}
+
+.Collapse {
+ svg {
+ transition: transform 250ms ease;
+ }
+
+ &.collapsed svg {
+ transform: rotate(-90deg);
+ }
+}
diff --git a/lib/components/TreeItem/TreeItem.tsx b/lib/components/TreeItem/TreeItem.tsx
new file mode 100644
index 0000000..dcad491
--- /dev/null
+++ b/lib/components/TreeItem/TreeItem.tsx
@@ -0,0 +1,94 @@
+import React, { forwardRef, HTMLAttributes, memo, ForwardedRef } from 'react';
+import classNames from 'clsx';
+
+import styles from './TreeItem.module.css';
+import { Action, ActionProps } from '../Action';
+import { RenderComponentType, TreeItem as TreeItemType } from '../../types';
+import { Handle as DefaultHandle } from '../Handle';
+import { DefaultContent } from './DefaultContent';
+import { Remove as DefaultRemove } from '../Remove';
+import { Badge as DefaultBadge } from './Badge';
+import { CollapseIcon } from '../Icons';
+
+export interface TreeItemProps extends Omit, 'id'> {
+ childCount?: number;
+ clone?: boolean;
+ collapsed?: boolean;
+ depth: number;
+ disableInteraction?: boolean;
+ disableSelection?: boolean;
+ ghost?: boolean;
+ handleProps?: ActionProps;
+ indicator?: boolean;
+ indentationWidth: number;
+ value: T;
+ components?: RenderComponentType;
+ onCollapse?(): void;
+ onRemove?(): void;
+ wrapperRef?(node: HTMLLIElement): void;
+}
+
+const TreeItemComponent = (props: TreeItemProps, ref: ForwardedRef) => {
+ const {
+ childCount,
+ clone,
+ depth,
+ disableSelection,
+ disableInteraction,
+ ghost,
+ handleProps,
+ indentationWidth,
+ indicator,
+ collapsed,
+ onCollapse,
+ onRemove,
+ style,
+ value,
+ components,
+ wrapperRef,
+ ...rest
+ } = props;
+ const { Handle, Collapse, ItemContent, Remove, Badge } = {
+ Handle: DefaultHandle,
+ Collapse: Action,
+ ItemContent: DefaultContent,
+ Remove: DefaultRemove,
+ Badge: DefaultBadge,
+ ...components,
+ };
+ return (
+
+
+
+
+ )}
+
+
+ );
+};
+
+export const TreeItem = memo(forwardRef(TreeItemComponent)) as (
+ props: TreeItemProps & { ref?: ForwardedRef },
+) => JSX.Element;
diff --git a/lib/components/TreeItem/index.ts b/lib/components/TreeItem/index.ts
new file mode 100644
index 0000000..8b93662
--- /dev/null
+++ b/lib/components/TreeItem/index.ts
@@ -0,0 +1,4 @@
+export { TreeItem } from './TreeItem';
+export * from './SortableTreeItem';
+export * from './DefaultContent';
+export * from './Badge';
diff --git a/lib/components/index.ts b/lib/components/index.ts
new file mode 100644
index 0000000..b3d7f6d
--- /dev/null
+++ b/lib/components/index.ts
@@ -0,0 +1,6 @@
+export * from './TreeItem';
+export * from './Scroll';
+export * from './Action';
+export * from './Handle';
+export * from './Remove';
+export * from './Icons';
diff --git a/lib/constants.ts b/lib/constants.ts
new file mode 100644
index 0000000..e5caffa
--- /dev/null
+++ b/lib/constants.ts
@@ -0,0 +1,35 @@
+import { defaultDropAnimation, DropAnimation, KeyboardCode, MeasuringStrategy } from '@dnd-kit/core';
+import { CSS } from '@dnd-kit/utilities';
+
+export const measuring = {
+ droppable: {
+ strategy: MeasuringStrategy.Always,
+ },
+};
+
+export const directions: string[] = [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
+
+export const horizontal: string[] = [KeyboardCode.Left, KeyboardCode.Right];
+
+export const dropAnimationConfig: DropAnimation = {
+ 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,
+ });
+ },
+};
diff --git a/lib/index.ts b/lib/index.ts
new file mode 100644
index 0000000..8775521
--- /dev/null
+++ b/lib/index.ts
@@ -0,0 +1,4 @@
+export { SortableTree } from './SortableTree';
+export type { SortableTreeProps } from './SortableTree';
+export type { TreeItem, FlattenedItem, RenderComponentType } from './types';
+export type { ActionProps } from './components';
diff --git a/lib/keyboardCoordinates.ts b/lib/keyboardCoordinates.ts
new file mode 100644
index 0000000..8d8adc9
--- /dev/null
+++ b/lib/keyboardCoordinates.ts
@@ -0,0 +1,192 @@
+import {
+ closestCorners,
+ getFirstCollision,
+ KeyboardCode,
+ KeyboardCoordinateGetter,
+ DroppableContainer,
+ SensorContext as DndSensorContext,
+} from '@dnd-kit/core';
+import { Coordinates } from '@dnd-kit/utilities';
+
+import type { FlattenedItem, NonNullablePick, SensorContext } from './types';
+import { getProjection } from './utilities';
+import { directions, horizontal } from './constants';
+
+const handleHorizontalMovement = (
+ items: FlattenedItem[],
+ event: KeyboardEvent,
+ currentCoordinates: Coordinates,
+ activeId: FlattenedItem['id'],
+ overId: FlattenedItem['id'],
+ offset: number,
+ indentationWidth: number,
+) => {
+ const { depth, maxDepth, minDepth } = getProjection(items, activeId, overId, offset, indentationWidth);
+
+ switch (event.code) {
+ case KeyboardCode.Left:
+ if (depth > minDepth) {
+ return {
+ ...currentCoordinates,
+ x: currentCoordinates.x - indentationWidth,
+ };
+ }
+ break;
+ case KeyboardCode.Right:
+ if (depth < maxDepth) {
+ return {
+ ...currentCoordinates,
+ x: currentCoordinates.x + indentationWidth,
+ };
+ }
+ break;
+ }
+
+ return undefined;
+};
+
+const getEligibleContainers = (
+ event: KeyboardEvent,
+ overId: FlattenedItem['id'] | undefined,
+ collisionRect: NonNullable,
+ droppableContainers: DndSensorContext['droppableContainers'],
+ droppableRects: DndSensorContext['droppableRects'],
+): DroppableContainer[] => {
+ const containers: DroppableContainer[] = [];
+
+ droppableContainers.forEach((container) => {
+ if (container?.disabled || container.id === overId) {
+ return;
+ }
+
+ const rect = droppableRects.get(container.id);
+
+ if (!rect) {
+ return;
+ }
+
+ switch (event.code) {
+ case KeyboardCode.Down:
+ if (collisionRect.top < rect.top) {
+ containers.push(container);
+ }
+ break;
+ case KeyboardCode.Up:
+ if (collisionRect.top > rect.top) {
+ containers.push(container);
+ }
+ break;
+ }
+ });
+
+ return containers;
+};
+type Params = [
+ FlattenedItem[],
+ NonNullablePick,
+ number,
+ boolean,
+];
+const getNewCoordinates = (
+ closestId: FlattenedItem['id'],
+ ...[items, context, indentationWidth, indicator]: Params
+) => {
+ const { droppableRects, collisionRect, droppableContainers, active } = context;
+ const activeRect = droppableRects.get(active.id);
+ const newRect = droppableRects.get(closestId);
+ const newDroppable = droppableContainers.get(closestId);
+
+ if (activeRect && newRect && newDroppable) {
+ const newIndex = items.findIndex(({ id }) => id === closestId);
+ const newItem = items[newIndex];
+ const activeIndex = items.findIndex(({ id }) => id === active.id);
+ const activeItem = items[activeIndex];
+
+ if (newItem && activeItem) {
+ const { depth } = getProjection(
+ items,
+ active.id,
+ closestId,
+ (newItem.depth - activeItem.depth) * indentationWidth,
+ indentationWidth,
+ );
+ const isBelow = newIndex > activeIndex;
+ const modifier = isBelow ? 1 : -1;
+ const offset = indicator ? (collisionRect.height - activeRect.height) / 2 : 0;
+
+ const newCoordinates = {
+ x: newRect.left + depth * indentationWidth,
+ y: newRect.top + modifier * offset,
+ };
+
+ return newCoordinates;
+ }
+ }
+};
+
+const handleVerticalMovement = (
+ containers: DroppableContainer[],
+ overId: FlattenedItem['id'] | undefined,
+ ...args: Params
+) => {
+ const [, context] = args;
+ const { droppableRects, collisionRect, active } = context;
+ const collisions = closestCorners({
+ active,
+ collisionRect,
+ pointerCoordinates: null,
+ droppableRects,
+ droppableContainers: containers,
+ });
+ let closestId = getFirstCollision(collisions, 'id');
+
+ if (closestId === overId && collisions.length > 1) {
+ closestId = collisions[1].id;
+ }
+
+ if (closestId && overId) {
+ return getNewCoordinates(closestId, ...args);
+ }
+};
+
+export const sortableTreeKeyboardCoordinates: (
+ context: SensorContext,
+ indicator: boolean,
+ indentationWidth: number,
+) => KeyboardCoordinateGetter =
+ (context, indicator, indentationWidth) =>
+ (event, { currentCoordinates, context: { active, over, collisionRect, droppableRects, droppableContainers } }) => {
+ if (directions.includes(event.code)) {
+ if (!active || !collisionRect) {
+ return;
+ }
+
+ event.preventDefault();
+
+ const {
+ current: { items, offset },
+ } = context;
+
+ if (horizontal.includes(event.code) && over?.id) {
+ return handleHorizontalMovement(items, event, currentCoordinates, active.id, over.id, offset, indentationWidth);
+ }
+
+ const containers = getEligibleContainers(event, over?.id, collisionRect, droppableContainers, droppableRects);
+
+ return handleVerticalMovement(
+ containers,
+ over?.id,
+ items,
+ {
+ collisionRect,
+ droppableRects,
+ droppableContainers,
+ active,
+ },
+ indentationWidth,
+ indicator,
+ );
+ }
+
+ return undefined;
+ };
diff --git a/lib/types.ts b/lib/types.ts
new file mode 100644
index 0000000..a79a1a8
--- /dev/null
+++ b/lib/types.ts
@@ -0,0 +1,51 @@
+import type { MutableRefObject } from 'react';
+import type { UniqueIdentifier } from '@dnd-kit/core';
+import { ActionProps, BadgeProps } from './components';
+
+export type BaseTreeItem = {
+ id: UniqueIdentifier;
+ collapsed?: boolean;
+};
+
+export type TreeItem = T & {
+ id: UniqueIdentifier;
+ collapsed?: boolean;
+ children: TreeItem[];
+};
+
+export type TreeItems = TreeItem[];
+
+export type FlattenedItem = TreeItem & {
+ parentId: UniqueIdentifier | null;
+ depth: number;
+ index: number;
+};
+
+export type SensorContext = MutableRefObject<{
+ items: T[];
+ offset: number;
+}>;
+
+export type NonNullablePick = {
+ [P in K]: NonNullable;
+};
+
+export type ProjectedType = {
+ depth: number;
+ maxDepth: number;
+ minDepth: number;
+ parentId: UniqueIdentifier | null;
+};
+
+export type PositionType = {
+ parentId: UniqueIdentifier | null;
+ overId: UniqueIdentifier;
+};
+
+export type RenderComponentType = {
+ Handle?: (props: ActionProps) => JSX.Element;
+ Collapse?: (props: ActionProps) => JSX.Element;
+ Remove?: (props: ActionProps) => JSX.Element;
+ ItemContent?: (props: T) => JSX.Element;
+ Badge?: (props: BadgeProps) => JSX.Element;
+};
diff --git a/lib/utilities.ts b/lib/utilities.ts
new file mode 100644
index 0000000..2f5d6c4
--- /dev/null
+++ b/lib/utilities.ts
@@ -0,0 +1,249 @@
+import type { Modifier, UniqueIdentifier } from '@dnd-kit/core';
+import { AnimateLayoutChanges, arrayMove } from '@dnd-kit/sortable';
+
+import type { FlattenedItem, ProjectedType, TreeItem } from './types';
+
+export const iOS =
+ /iPad|iPhone|iPod/.test(navigator.userAgent) || (navigator.userAgent.includes('Mac') && 'ontouchend' in document);
+
+function getDragDepth(offset: number, indentationWidth: number) {
+ return Math.round(offset / indentationWidth);
+}
+
+export function getProjection(
+ items: FlattenedItem[],
+ activeId: UniqueIdentifier,
+ overId: UniqueIdentifier,
+ dragOffset: number,
+ indentationWidth: number,
+): ProjectedType {
+ const overItemIndex = items.findIndex(({ id }) => id === overId);
+ const activeItemIndex = items.findIndex(({ id }) => id === activeId);
+ const activeItem = items[activeItemIndex];
+ const newItems = arrayMove(items, activeItemIndex, overItemIndex);
+ const previousItem = newItems[overItemIndex - 1];
+ const nextItem = newItems[overItemIndex + 1];
+ const dragDepth = getDragDepth(dragOffset, indentationWidth);
+ const projectedDepth = activeItem.depth + dragDepth;
+ const maxDepth = getMaxDepth({
+ previousItem,
+ });
+ const minDepth = getMinDepth({ nextItem });
+ let depth = projectedDepth;
+
+ if (projectedDepth >= maxDepth) {
+ depth = maxDepth;
+ } else if (projectedDepth < minDepth) {
+ depth = minDepth;
+ }
+
+ return { depth, maxDepth, minDepth, parentId: getParentId() };
+
+ function getParentId() {
+ if (depth === 0 || !previousItem) {
+ return null;
+ }
+
+ if (depth === previousItem.depth) {
+ return previousItem.parentId;
+ }
+
+ if (depth > previousItem.depth) {
+ return previousItem.id;
+ }
+
+ const newParent = newItems
+ .slice(0, overItemIndex)
+ .reverse()
+ .find((item) => item.depth === depth)?.parentId;
+
+ return newParent ?? null;
+ }
+}
+
+function getMaxDepth({ previousItem }: { previousItem: FlattenedItem }) {
+ if (previousItem) {
+ return previousItem.depth + 1;
+ }
+
+ return 0;
+}
+
+function getMinDepth({ nextItem }: { nextItem: FlattenedItem }) {
+ if (nextItem) {
+ return nextItem.depth;
+ }
+
+ return 0;
+}
+
+function flatten(
+ items: TreeItem[],
+ parentId: UniqueIdentifier | null = null,
+ depth = 0,
+): FlattenedItem[] {
+ return items.reduce[]>((acc, item, index) => {
+ return [...acc, { ...item, parentId, depth, index }, ...flatten(item.children, item.id, depth + 1)];
+ }, []);
+}
+
+export function flattenTree(items: TreeItem[]): FlattenedItem[] {
+ return flatten(items);
+}
+
+export function buildTree(flattenedItems: FlattenedItem[]): TreeItem[] {
+ const root = { id: 'root', children: [] } as TreeItem;
+ const nodes: Record = { [root.id]: root };
+ const items = flattenedItems.map((item) => ({ ...item, children: [] }));
+
+ for (const item of items) {
+ const { id, children } = item;
+ const parentId = item.parentId ?? root.id;
+ const parent = nodes[parentId] ?? findItem(items, parentId);
+
+ nodes[id] = { id, children };
+ parent.children.push(item);
+ }
+
+ return root.children;
+}
+
+export function findItem(items: TreeItem[], itemId: UniqueIdentifier) {
+ return items.find(({ id }) => id === itemId);
+}
+
+export function findItemDeep(items: TreeItem[], itemId: UniqueIdentifier): TreeItem | undefined {
+ for (const item of items) {
+ const { id, children } = item;
+
+ if (id === itemId) {
+ return item;
+ }
+
+ if (children.length) {
+ const child = findItemDeep(children, itemId);
+
+ if (child) {
+ return child;
+ }
+ }
+ }
+
+ return undefined;
+}
+
+export function removeItem(items: TreeItem[], id: UniqueIdentifier) {
+ const newItems = [];
+
+ for (const item of items) {
+ if (item.id === id) {
+ continue;
+ }
+
+ if (item.children.length) {
+ item.children = removeItem(item.children, id);
+ }
+
+ newItems.push(item);
+ }
+
+ return newItems;
+}
+
+export function setProperty(
+ items: TreeItem[],
+ id: UniqueIdentifier,
+ property: K,
+ setter: (value: TreeItem[K]) => TreeItem[K],
+) {
+ for (const item of items) {
+ if (item.id === id) {
+ item[property] = setter(item[property]);
+ continue;
+ }
+
+ if (item.children.length) {
+ item.children = setProperty(item.children, id, property, setter);
+ }
+ }
+
+ return [...items];
+}
+
+function countChildren(items: TreeItem[], count = 0): number {
+ return items.reduce((acc, { children }) => {
+ if (children.length) {
+ return countChildren(children, acc + 1);
+ }
+
+ return acc + 1;
+ }, count);
+}
+
+export function getChildCount(items: T[], id: UniqueIdentifier) {
+ const item = findItemDeep(items, id);
+
+ return item ? countChildren(item.children) : 0;
+}
+
+export function removeChildrenOf(items: T[], ids: UniqueIdentifier[]) {
+ const excludeParentIds = [...ids];
+
+ return items.filter((item) => {
+ if (item.parentId && excludeParentIds.includes(item.parentId)) {
+ if (item.children.length) {
+ excludeParentIds.push(item.id);
+ }
+ return false;
+ }
+
+ return true;
+ });
+}
+
+export const animateLayoutChanges: AnimateLayoutChanges = ({ isSorting, wasDragging }) => !(isSorting || wasDragging);
+
+export const adjustTranslate: Modifier = ({ transform }) => {
+ return {
+ ...transform,
+ y: transform.y - 25,
+ };
+};
+
+export const getAnnouncement = (
+ eventName: string,
+ overId: FlattenedItem['id'],
+ activeId: FlattenedItem['id'],
+ items: TreeItem[],
+ projected: ProjectedType,
+) => {
+ const clonedItems: FlattenedItem[] = JSON.parse(JSON.stringify(flattenTree(items)));
+ const overIndex = clonedItems.findIndex(({ id }) => id === overId);
+ const activeIndex = clonedItems.findIndex(({ id }) => id === activeId);
+ const sortedItems = arrayMove(clonedItems, activeIndex, overIndex);
+
+ const previousItem = sortedItems[overIndex - 1];
+
+ let announcement;
+ const movedVerb = eventName === 'onDragEnd' ? 'dropped' : 'moved';
+ const nestedVerb = eventName === 'onDragEnd' ? 'dropped' : 'nested';
+
+ if (!previousItem) {
+ const nextItem = sortedItems[overIndex + 1];
+ announcement = `${activeId} was ${movedVerb} before ${nextItem.id}.`;
+ } else if (projected.depth > previousItem.depth) {
+ announcement = `${activeId} was ${nestedVerb} under ${previousItem.id}.`;
+ } else {
+ let previousSibling: FlattenedItem | undefined = previousItem;
+ while (previousSibling && projected.depth < previousSibling.depth) {
+ const parentId: UniqueIdentifier | null = previousSibling.parentId;
+ previousSibling = sortedItems.find(({ id }) => id === parentId);
+ }
+
+ if (previousSibling) {
+ announcement = `${activeId} was ${movedVerb} after ${previousSibling.id}.`;
+ }
+ }
+
+ return announcement;
+};
diff --git a/lib/vite-env.d.ts b/lib/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/lib/vite-env.d.ts
@@ -0,0 +1 @@
+///