@clevertask/react-sortable-tree 0.0.6 → 0.0.8

package/dist/src/SortableTree/SortableTree.d.ts

@@ -0,0 +1,2 @@
+import { SortableTreeProps, TreeItem } from './types';
+export declare const SortableTree: <T extends TreeItem = TreeItem>(props: SortableTreeProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/SortableTree/components/TreeItem/TreeItem.d.ts

@@ -0,0 +1,33 @@
+import { default as React, HTMLAttributes } from 'react';
+import { TreeItemStructureProps } from '../TreeItemStructure';
+import { TreeItem as TTreeItem } from '../../types';
+export interface RenderItemProps<T extends TTreeItem = TTreeItem> extends Pick<TreeItemStructureProps, 'classNames' | 'dropZoneStyle' | 'dropZoneRef' | 'draggableItemRef'>, Pick<Props, 'onCollapse' | 'childCount' | 'clone' | 'ghost' | 'indicator' | 'disableSelection' | 'disableInteraction' | 'collapsed'> {
+    dragListeners?: any;
+    treeItem: T;
+    dataSlots: {
+        dropZone: Record<string, string | boolean | undefined>;
+        draggableItem: Record<string, string>;
+    };
+}
+export interface Props<T extends TTreeItem = TTreeItem> extends Omit<HTMLAttributes<HTMLLIElement>, 'id'> {
+    childCount?: number;
+    clone?: boolean;
+    collapsed?: boolean;
+    depth: number;
+    disableInteraction?: boolean;
+    disableSelection?: boolean;
+    disableDragging?: boolean;
+    ghost?: boolean;
+    handleProps?: any;
+    indicator?: boolean;
+    indentationWidth: number;
+    value: T;
+    onCollapse?(): void;
+    onRemove?(): void;
+    onAdd?(): void;
+    onLabelClick?(): void;
+    wrapperRef: RenderItemProps<T>['dropZoneRef'];
+    renderItem?: (props: RenderItemProps<T>) => React.ReactNode;
+}
+export declare const _TreeItem: React.ForwardRefExoticComponent<Props<import('../..').BaseTreeItem<unknown>> & React.RefAttributes<HTMLDivElement>>;
+export declare const TreeItem: React.NamedExoticComponent<Props<import('../..').BaseTreeItem<unknown>> & React.RefAttributes<HTMLDivElement>>;

package/dist/{SortableTree → src/SortableTree}/components/TreeItem/index.d.ts

@@ -1,2 +1,3 @@
 export { TreeItem } from './TreeItem';
 export { SortableTreeItem } from './SortableTreeItem';
+export type { RenderItemProps } from './TreeItem';

package/dist/src/SortableTree/components/TreeItemStructure/index.d.ts

@@ -0,0 +1,39 @@
+import { TreeItem } from '../../types';
+import { RenderItemProps } from '../TreeItem/TreeItem';
+import { default as React } from 'react';
+type AriaProps = {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+};
+export type TreeItemStructureProps = {
+    treeItem: TreeItem & {
+        parentId?: string;
+    };
+    dropZoneRef: (element: HTMLElement | null) => void;
+    draggableItemRef: React.Ref<any>;
+    dropZoneStyle?: React.CSSProperties;
+    draggableItemStyle?: React.CSSProperties;
+    classNames?: {
+        dropZone?: string;
+        draggableItem?: string;
+    };
+    asDropZone?: React.ElementType;
+    asDraggableItem?: React.ElementType;
+    children?: React.ReactNode;
+    clone?: boolean;
+    dataSlots: {
+        dropZone?: AriaProps & Record<string, string | boolean | number | undefined>;
+        draggableItem?: AriaProps & Record<string, string>;
+    };
+} & Pick<RenderItemProps, 'dragListeners'>;
+export declare const TreeItemStructure: {
+    ({ dropZoneRef, draggableItemRef, dropZoneStyle, draggableItemStyle, classNames, asDropZone: DropZoneComponent, asDraggableItem: DraggableComponent, children, dataSlots, treeItem, clone, dragListeners, }: TreeItemStructureProps): import("react/jsx-runtime").JSX.Element;
+    DragHandler({ children, as: Component, className, style, }: {
+        children: React.ReactNode;
+        as?: React.ElementType;
+        className?: string;
+        style?: React.CSSProperties;
+    }): import("react/jsx-runtime").JSX.Element | null;
+};
+export {};

package/dist/src/SortableTree/components/index.d.ts

@@ -0,0 +1,4 @@
+export { TreeItem, SortableTreeItem } from './TreeItem';
+export type { RenderItemProps } from './TreeItem';
+export { TreeItemStructure } from './TreeItemStructure';
+export type { TreeItemStructureProps } from './TreeItemStructure';

package/dist/src/SortableTree/createSortableTreeGlobalStyles.d.ts

@@ -0,0 +1,8 @@
+type SortableTreeStyleOptions = {
+    indicatorColor?: string;
+    indicatorBorderColor?: string;
+    indicatorDotColor?: string;
+    dragBoxShadow?: string;
+};
+export declare const createSortableTreeGlobalStyles: (options?: SortableTreeStyleOptions) => () => void;
+export {};

package/dist/src/SortableTree/index.d.ts

@@ -0,0 +1,6 @@
+export * from './types';
+export { SortableTree } from './SortableTree';
+export { TreeItemStructure } from './components';
+export type { TreeItemStructureProps, RenderItemProps } from './components';
+export { setTreeItemProperties, removeItemById, getItemById } from './utilities';
+export { createSortableTreeGlobalStyles } from './createSortableTreeGlobalStyles';

package/dist/{SortableTree → src/SortableTree}/types.d.ts

@@ -1,9 +1,11 @@
 import { MutableRefObject } from 'react';
 import { UniqueIdentifier } from '@dnd-kit/core';
+import { Props } from './components/TreeItem/TreeItem';
+export type TreeItem<ExtraProps = unknown> = BaseTreeItem & ExtraProps;
 /**
  * Represents an item in the tree structure.
  */
-export type TreeItem = {
+export type BaseTreeItem<ExtraProps = unknown> = {
     /**
      * Unique identifier for the item. Can be a string or number.
      */
@@ -15,7 +17,7 @@ export type TreeItem = {
     /**
      * An array of child TreeItems. If empty, the item is a leaf node.
      */
-    children: TreeItem[];
+    children: TreeItem<ExtraProps>[];
     /**
      * Determines whether the item's children are initially collapsed.
      * @default false
@@ -34,12 +36,8 @@ export type TreeItem = {
      * @default false
      */
     disableDragging?: boolean;
-    /**
-     * Any additional custom properties can be added here.
-     */
-    [key: string]: any;
 };
-export type TreeItems = TreeItem[];
+export type TreeItems<ExtraProps = unknown> = TreeItem<ExtraProps>[];
 export interface FlattenedItem extends TreeItem {
     parentId: UniqueIdentifier | null;
     depth: number;
@@ -52,7 +50,7 @@ export type SensorContext = MutableRefObject<{
 /**
  * Props for the SortableTree component.
  */
-export interface SortableTreeProps {
+export interface SortableTreeProps<T extends TreeItem = TreeItem> {
     /**
      * A control that lets you add the indentation width for children elements
      */
@@ -60,12 +58,12 @@ export interface SortableTreeProps {
     /**
      * The array of tree items to be rendered.
      */
-    items: TreeItems;
+    items: TreeItems<T>;
     /**
      * Callback function called when the tree structure changes.
      * @param items - The updated array of tree items.
      */
-    setItems: React.Dispatch<React.SetStateAction<TreeItems>>;
+    setItems: React.Dispatch<React.SetStateAction<TreeItems<T>>>;
     /**
      * Determines if tree items can be collapsed/expanded.
      * @default false
@@ -119,7 +117,7 @@ export interface SortableTreeProps {
      * @param item
      * @returns
      */
-    renderItem?: (item: TreeItem) => React.ReactNode;
+    renderItem?: Props<T>['renderItem'];
 }
 /**
  * Represents the result of a drag operation in the tree.

package/dist/{SortableTree → src/SortableTree}/utilities.d.ts

@@ -9,16 +9,16 @@ export declare function getProjection(items: FlattenedItem[], activeId: UniqueId
 };
 export declare function flattenTree(items: TreeItems): FlattenedItem[];
 export declare function buildTree(flattenedItems: FlattenedItem[]): TreeItems;
-export declare function findItem(items: TreeItem[], itemId: UniqueIdentifier): TreeItem | undefined;
+export declare function findItem(items: TreeItem[], itemId: UniqueIdentifier): import('./types').BaseTreeItem<unknown> | undefined;
 export declare function findItemDeep(items: TreeItems, itemId: UniqueIdentifier): TreeItem | undefined;
-export declare function removeItemById(items: TreeItems, id: UniqueIdentifier): TreeItems;
-export declare function setTreeItemProperties(items: TreeItems, id: UniqueIdentifier, setter: (value: TreeItem) => Partial<TreeItem>): TreeItems;
+export declare function removeItemById<T extends TreeItem>(items: TreeItems<T>, id: UniqueIdentifier): TreeItems<T>;
+export declare function setTreeItemProperties<T extends TreeItem>(items: TreeItems<T>, id: UniqueIdentifier, setter: (value: T) => Partial<T>): TreeItems<T>;
 /**
  * Retrieves a tree item by its unique identifier.
  * @param structure The current tree items array
  * @param id The unique identifier of the item to retrieve.
  * @returns The tree item if found, undefined otherwise.
  */
-export declare function getItemById(items: TreeItems, id: UniqueIdentifier): TreeItem | undefined;
+export declare function getItemById<T extends TreeItem>(items: TreeItems<T>, id: UniqueIdentifier): TreeItem<T> | undefined;
 export declare function getChildCount(treeStructure: TreeItems, id: UniqueIdentifier): number;
 export declare function removeChildrenOf(items: FlattenedItem[], ids: UniqueIdentifier[]): FlattenedItem[];

package/package.json

@@ -1,46 +1,70 @@
 {
   "name": "@clevertask/react-sortable-tree",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "license": "MIT",
   "author": "CleverTask",
   "files": [
     "dist"
   ],
-  "main": "./dist/react-sortable-tree.js",
-  "types": "./dist/index.d.ts",
-  "scripts": {
-    "dev": "vite",
-    "build": "rm -rf dist && tsc -b && vite build",
-    "lint": "eslint .",
-    "format": "prettier . --write",
-    "preview": "vite preview",
-    "prepublishOnly": "npm run build"
+  "homepage": "https://github.com/clevertask/react-sortable-tree#readme",
+  "bugs": {
+    "url": "https://github.com/clevertask/react-sortable-tree/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/clevertask/react-sortable-tree"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "default": "./dist/react-sortable-tree.js"
+    },
+    "./e2e": {
+      "types": "./dist/e2e/utils/index.d.ts",
+      "default": "./dist/e2e/index.js"
+    }
   },
   "dependencies": {
-    "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@griffel/react": "^1.5.29",
     "classnames": "^2.5.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.9.0",
-    "@types/node": "^22.7.6",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react-swc": "^3.7.1",
-    "eslint": "^9.12.0",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "^0.4.12",
-    "globals": "^15.11.0",
-    "prettier": "^3.3.3",
-    "typescript": "^5.6.3",
-    "typescript-eslint": "^8.10.0",
-    "vite": "^5.4.9",
-    "vite-plugin-dts": "^4.2.4"
+    "@eslint/js": "^9.25.0",
+    "@playwright/test": "^1.57.0",
+    "@types/node": "^22.14.1",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react-swc": "^3.9.0",
+    "eslint": "^9.25.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^16.0.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
+    "prettier": "^3.5.3",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.30.1",
+    "vite": "^6.3.2",
+    "vite-plugin-dts": "^4.5.3"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": ">=18.3.1 <20.0.0",
+    "react-dom": ">=18.3.1 <20.0.0"
+  },
+  "lint-staged": {
+    "*.{ts, tsx, css}": "pnpm run format"
+  },
+  "scripts": {
+    "dev": "vite",
+    "e2e": "playwright test",
+    "e2e:dev": "playwright test --ui",
+    "build": "rm -rf dist && vite build && vite build -c vite.test.config.ts",
+    "lint": "eslint .",
+    "format": "prettier --write",
+    "preview": "vite preview"
   }
-}
+}

package/dist/SortableTree/SortableTree.d.ts

@@ -1,4 +0,0 @@
-import { SortableTreeProps } from './types';
-declare function PrivateSortableTree({ items, setItems, isCollapsible, onLazyLoadChildren, showDropIndicator, indentationWidth, isRemovable, onRemoveItem, allowNestedItemAddition, onAddItem, onDragEnd, onItemClick, renderItem, }: SortableTreeProps): import("react/jsx-runtime").JSX.Element;
-export declare const SortableTree: import('react').MemoExoticComponent<typeof PrivateSortableTree>;
-export {};

package/dist/SortableTree/components/TreeItem/TreeItem.d.ts

@@ -1,23 +0,0 @@
-import { default as React, HTMLAttributes } from 'react';
-export interface Props extends Omit<HTMLAttributes<HTMLLIElement>, 'id'> {
-    childCount?: number;
-    clone?: boolean;
-    collapsed?: boolean;
-    depth: number;
-    disableInteraction?: boolean;
-    disableSelection?: boolean;
-    disableDragging?: boolean;
-    ghost?: boolean;
-    handleProps?: any;
-    indicator?: boolean;
-    indentationWidth: number;
-    value: string;
-    onCollapse?(): void;
-    onRemove?(): void;
-    onAdd?(): void;
-    onLabelClick?(): void;
-    wrapperRef?(node: HTMLLIElement): void;
-    renderedItem?: React.ReactNode;
-}
-export declare const _TreeItem: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
-export declare const TreeItem: React.MemoExoticComponent<React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>>;

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

@@ -1 +0,0 @@
-export { TreeItem, SortableTreeItem } from './TreeItem';

package/dist/SortableTree/index.d.ts

@@ -1,3 +0,0 @@
-export * from './types';
-export { SortableTree } from './SortableTree';
-export { setTreeItemProperties, removeItemById, getItemById } from './utilities';