@neo4j-ndl/react 2.9.4 → 2.10.0

package/lib/types/index.d.ts

@@ -61,3 +61,4 @@ export * from './logo';
 export * from './clipboard-copier';
 export * from './slider';
 export * from './inline-edit';
+export * from './tree-view';

package/lib/types/table/Table.d.ts

@@ -57,7 +57,7 @@ declare const TableNameSpace: (<T extends unknown>(props: {
     focusableCells?: boolean | undefined;
     tableProps: TableType<T>;
     components?: TableComponentsInterface<T> | undefined;
-} & Omit<ElementBase<HTMLDivElement>, "as" | "controls" | "data" | "headers" | "rows"> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) & {
+} & Omit<ElementBase<HTMLDivElement>, "data" | "as" | "controls" | "headers" | "rows"> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) & {
     RowActions: ({ className, ...restProps }: ElementBase<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
 };
 export default TableNameSpace;

package/lib/types/tree-view/TreeItemWrapper.d.ts

@@ -0,0 +1,32 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+import type { TreeItemComponentProps } from './tree-view-types';
+/**
+ * Used as a helper function to wrap the TreeItem component
+ * This adds the drag handle and trail to the start of a tree item.
+ * Useful if you want to add additional functionality to the tree item but still keep the drag handle and trail
+ * Is also used internally to create the TreeViewTextItem component
+ */
+export declare const TreeItemWrapper: React.ForwardRefExoticComponent<TreeItemComponentProps<Record<string, unknown>> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>;

package/lib/types/tree-view/TreeView.d.ts

@@ -0,0 +1,34 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/// <reference types="react" />
+import { type ItemChangedReason, type TreeItem, type TreeItemComponent } from './tree-view-types';
+export interface TreeViewProps<T extends Record<string, unknown>, E extends HTMLElement> extends React.HTMLAttributes<HTMLOListElement> {
+    items: TreeItem<T>[];
+    onItemsChanged: (newItems: TreeItem<T>[], itemChangedReason: ItemChangedReason<T>) => void;
+    TreeItemComponent?: TreeItemComponent<T, E>;
+}
+export declare const TreeView: {
+    <T extends Record<string, unknown>, E extends HTMLElement>({ items, TreeItemComponent, onItemsChanged, ...rest }: TreeViewProps<T, E>): import("react/jsx-runtime").JSX.Element;
+    TreeItemWrapper: import("react").ForwardRefExoticComponent<import("./tree-view-types").TreeItemComponentProps<Record<string, unknown>> & {
+        children?: import("react").ReactNode;
+    } & import("react").RefAttributes<HTMLElement>>;
+};

package/lib/types/tree-view/TreeViewItem.d.ts

@@ -0,0 +1,52 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { type UniqueIdentifier } from '@dnd-kit/core';
+import { type UseSortableArguments } from '@dnd-kit/sortable';
+import { type FlattenedTreeItem, type ItemChangedReason, type TreeItemComponent } from './tree-view-types';
+export interface TreeItemProps<T> {
+    childCount?: number;
+    clone?: boolean;
+    collapsed?: boolean;
+    depth: number;
+    shouldDisableInteraction?: boolean;
+    indicator?: boolean;
+    indentationWidth: number;
+    item: FlattenedTreeItem<T>;
+    isLast: boolean;
+    parent: FlattenedTreeItem<T> | null;
+    onCollapse?(id: UniqueIdentifier): void;
+    onRemove?(id: UniqueIdentifier): void;
+    wrapperRef?(node: HTMLLIElement): void;
+}
+type SortableTreeItemProps<T extends Record<string, unknown>, E extends HTMLElement> = TreeItemProps<T> & {
+    id: UniqueIdentifier;
+    TreeItemComponent: TreeItemComponent<T, E>;
+    shouldDisableSorting?: boolean;
+    sortableProps?: Omit<UseSortableArguments, 'id'>;
+    keepGhostInPlace?: boolean;
+    trails: ('none' | 'straight' | 'straight-curved' | 'curved')[];
+    onItemsChanged: (newItems: FlattenedTreeItem<T>[], itemChangedReason: ItemChangedReason<T>) => void;
+    items: FlattenedTreeItem<T>[];
+    tabIndex?: number;
+    onFocus?: () => void;
+};
+export declare const SortableTreeViewItem: <T extends Record<string, unknown>, E extends HTMLElement>({ id, depth, isLast, TreeItemComponent, parent, shouldDisableSorting, sortableProps, keepGhostInPlace, item, onCollapse, trails, onItemsChanged, items, tabIndex, onFocus, ...restProps }: SortableTreeItemProps<T, E>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/types/tree-view/TreeViewTextItem.d.ts

@@ -0,0 +1,23 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import React from 'react';
+import type { TreeItemComponentProps } from './tree-view-types';
+export declare const TreeViewTextItem: <T>(p: React.PropsWithChildren<TreeItemComponentProps<T extends Record<string, unknown> ? T : never> & React.RefAttributes<HTMLDivElement>>) => React.ReactElement;

package/lib/types/tree-view/TreeViewTrail.d.ts

@@ -0,0 +1,24 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+export type TrailProps = {
+    variant: 'straight' | 'curved' | 'straight-curved' | 'none';
+};
+export declare const Trail: ({ variant }: TrailProps) => import("react/jsx-runtime").JSX.Element;

package/lib/types/tree-view/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+export { TreeView } from './TreeView';
+export type { TreeViewProps } from './TreeView';
+export type * from './tree-view-types';

package/lib/types/tree-view/tree-view-keyboard-coordinates.d.ts

@@ -0,0 +1,23 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { type KeyboardCoordinateGetter } from '@dnd-kit/core';
+import { type SensorContext } from './tree-view-utils';
+export declare const sortableTreeKeyboardCoordinates: <T>(context: SensorContext<T>, indicator: boolean, indentationWidth: number) => KeyboardCoordinateGetter;

package/lib/types/tree-view/tree-view-keyboard-helpers.d.ts

@@ -0,0 +1,25 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export declare const focusNextRow: (parentElement: HTMLElement) => void;
+export declare const focusPreviousRow: (parentElement: HTMLElement) => void;
+export declare const focusCellInNextRow: (parentElement: HTMLElement) => void;
+export declare const focusCellInPreviousRow: (parentElement: HTMLElement) => void;

package/lib/types/tree-view/tree-view-types.d.ts

@@ -0,0 +1,80 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { type UniqueIdentifier } from '@dnd-kit/core';
+import { type RefAttributes } from 'react';
+import { type IconButtonProps } from '../button';
+export type TreeItem<T> = {
+    id: UniqueIdentifier;
+    canHaveSubItems: false;
+    isSortable?: boolean;
+    data: T;
+    isSelected?: boolean;
+} | {
+    id: UniqueIdentifier;
+    canHaveSubItems: true;
+    isCollapsed: boolean;
+    subItems: TreeItem<T>[];
+    isSortable?: boolean;
+    data: T;
+    isSelected?: boolean;
+};
+export type TextItemData = {
+    text: string;
+    onTextClick?: () => void;
+    actions: {
+        icon: React.ReactNode;
+        buttonProps: Omit<IconButtonProps, 'children'>;
+    }[];
+};
+export type DefaultTreeItem = TreeItem<TextItemData>;
+export type FlattenedTreeItem<T> = TreeItem<T> & {
+    depth: number;
+    parentId: UniqueIdentifier | null;
+};
+export type TreeItemComponent<T extends Record<string, unknown>, TElement extends HTMLElement> = React.FC<React.PropsWithChildren<TreeItemComponentProps<T> & RefAttributes<TElement>>>;
+export type TreeItemComponentProps<T extends Record<string, unknown>> = {
+    item: FlattenedTreeItem<T>;
+    parent: FlattenedTreeItem<T> | null;
+    isGhost?: boolean;
+    isCollapsed?: boolean;
+    depth: number;
+    shouldDisableInteraction?: boolean;
+    shouldDisableSorting?: boolean;
+    isOver: boolean;
+    isOverParent: boolean;
+    isLastInParent: boolean;
+    isIndicator?: boolean;
+    indentationWidth: number;
+    onCollapse?(): void;
+    setActivatorNodeRef: (node: HTMLElement | null) => void;
+    setNodeRef: (node: HTMLLIElement) => void;
+    dragHandleProps?: Record<string, unknown>;
+    style?: React.CSSProperties;
+    trails: ('none' | 'straight' | 'straight-curved' | 'curved')[];
+    items: FlattenedTreeItem<T>[];
+    onItemsChanged: (newItems: FlattenedTreeItem<T>[], reason: ItemChangedReason<T>) => void;
+    tabIndex?: number;
+    onFocus?: () => void;
+};
+export type ItemChangedReason<T> = {
+    item: TreeItem<T>;
+    reason: 'collapsed' | 'expanded' | 'dropped' | 'selected' | 'other';
+};

package/lib/types/tree-view/tree-view-utils.d.ts

@@ -0,0 +1,77 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { type UniqueIdentifier } from '@dnd-kit/core';
+import { type MutableRefObject } from 'react';
+import { type FlattenedTreeItem, type TreeItem } from './tree-view-types';
+export type SensorContext<T> = MutableRefObject<{
+    items: FlattenedTreeItem<T>[];
+    offset: number;
+}>;
+/**
+ * Takes a tree and flattens it into a list of item
+ * where each item has a depth and a parentId.
+ * @param tree the tree to flatten
+ * @param depth the depth of the root of the tree (default 0)
+ * @param parentId the id of the parent of the root of the tree (default null)
+ * @returns a list of items with depth and parentId
+ */
+export declare const flattenTree: <T>(tree: TreeItem<T>[], depth?: number, parentId?: UniqueIdentifier | null) => FlattenedTreeItem<T>[];
+/**
+ * Removes the children of the items with the given ids
+ * @param items the flattened tree items to remove the children from
+ * @param ids the ids of the items to remove the children from
+ * @returns a new list of items with the children of the items with the given ids removed
+ */
+export declare function removeChildrenOf<T>(items: FlattenedTreeItem<T>[], ids: UniqueIdentifier[]): FlattenedTreeItem<T>[];
+/**
+ * Builds a tree from a list of flattened tree items
+ * @param items the flattened tree items
+ * @returns the items as a tree data structure
+ */
+export declare function buildTree<T>(items: FlattenedTreeItem<T>[]): TreeItem<T>[];
+/**
+ * Calculates the new depth, max depth, min depth and parent id of the item being dragged
+ * Used to project the position of the dragged item. For example, to convert the item being dragged into a placeholder.
+ * such as the line that appears when dragging an item in a tree view.
+ * @param items the flattened tree items
+ * @param activeId the id of the item being dragged
+ * @param overId the id of the item that the dragged item is being dragged over
+ * @param dragOffset the offset of the drag in pixels
+ * @param indentationWidth the width of the indentation in pixels
+ * @returns the depth, max depth, min depth and parent id of the item being dragged
+ */
+export declare function getProjection<T>(items: FlattenedTreeItem<T>[], activeId: UniqueIdentifier, overId: UniqueIdentifier, dragOffset: number, indentationWidth: number): {
+    depth: number;
+    maxDepth: number;
+    minDepth: number;
+    parentId: UniqueIdentifier | null;
+};
+/**
+ *
+ * @param transform a transform object
+ * @returns a css transform string
+ */
+export declare const transformToString: (transform: {
+    scaleX: number;
+    scaleY: number;
+    x: number;
+    y: number;
+}) => string;

package/lib/types/typography/Typography.d.ts

@@ -20,7 +20,7 @@
  */
 
 import { type AsType, type ConditionalTypography } from './types';
-export declare const Typography: <TVar extends "label" | "code" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subheading-large" | "subheading-medium" | "subheading-small" | "body-large" | "body-medium" | "body-small", TAs extends AsType = undefined>(props: {
+export declare const Typography: <TVar extends "code" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "subheading-large" | "subheading-medium" | "subheading-small" | "body-large" | "body-medium" | "body-small", TAs extends AsType = undefined>(props: {
     as?: TAs | undefined;
     variant: TVar;
 } & ConditionalTypography<TAs, TVar>) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "2.9.4",
+  "version": "2.10.0",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [
@@ -85,6 +85,8 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
+    "@dnd-kit/core": "6.1.0",
+    "@dnd-kit/sortable": "8.0.0",
     "@floating-ui/react": "0.25.1",
     "@heroicons/react": "2.0.13",
     "@neo4j-cypher/react-codemirror": "^1.0.1",