react-complex-tree - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

lib/cjs/controlledEnvironment/DragAndDropProvider.js

@@ -177,4 +177,5 @@ var __assign = (this && this.__assign) || function () {
         onDragOverTreeHandler: onDragOverTreeHandler,
+        viableDragPositions: viableDragPositions,
     };
     return React.createElement(DragAndDropContext.Provider, { value: dnd }, props.children);
 };

lib/cjs/hotkeys/useHotkey.js

@@ -58,3 +58,3 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
         if (match) {
-            onHit(e);
+            requestAnimationFrame(function () { return onHit(e); });
         }
@@ -61,0 +61,0 @@ pressedKeys.current = pressedKeys.current.filter(function (key) { return key !== e.key; });

lib/cjs/interactionMode/ClickArrowToExpandInteractionManager.js

@@ -33,3 +33,3 @@ import { InteractionMode, } from '../types';
             onDragStart: function (e) {
-                e.dataTransfer.dropEffect = 'copy'; // TODO
+                e.dataTransfer.dropEffect = 'move'; // TODO
                 // e.dataTransfer.setDragImage(environment.renderDraggingItem(viewState.selectedItems), 0, 0);
@@ -36,0 +36,0 @@ actions.startDragging();

lib/cjs/interactionMode/ClickItemToExpandInteractionManager.js

@@ -37,3 +37,3 @@ import { InteractionMode, } from '../types';
             onDragStart: function (e) {
-                e.dataTransfer.dropEffect = 'copy'; // TODO
+                e.dataTransfer.dropEffect = 'move'; // TODO
                 // e.dataTransfer.setDragImage(environment.renderDraggingItem(viewState.selectedItems), 0, 0);
@@ -40,0 +40,0 @@ actions.startDragging();

lib/cjs/interactionMode/DoubleClickItemToExpandInteractionManager.js

@@ -41,3 +41,3 @@ import { InteractionMode, } from '../types';
             onDragStart: function (e) {
-                e.dataTransfer.dropEffect = 'copy'; // TODO
+                e.dataTransfer.dropEffect = 'move'; // TODO
                 // e.dataTransfer.setDragImage(environment.renderDraggingItem(viewState.selectedItems), 0, 0);
@@ -44,0 +44,0 @@ actions.startDragging();

lib/cjs/renderers/createDefaultRenderers.js

@@ -38,6 +38,6 @@ var __assign = (this && this.__assign) || function () {
                 (context.isExpanded ? (React.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", viewBox: "0 0 16 16", enableBackground: "new 0 0 16 16", xmlSpace: "preserve" },
-                    React.createElement("g", { id: "chevron_down" },
+                    React.createElement("g", null,
                         React.createElement("g", null,
                             React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12,5c-0.28,0-0.53,0.11-0.71,0.29L8,8.59L4.71,5.29C4.53,5.11,4.28,5,4,5\n                      C3.45,5,3,5.45,3,6c0,0.28,0.11,0.53,0.29,0.71l4,4C7.47,10.89,7.72,11,8,11s0.53-0.11,0.71-0.29l4-4C12.89,6.53,13,6.28,13,6\n                      C13,5.45,12.55,5,12,5z", className: "rct-tree-item-arrow-path" }))))) : (React.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", viewBox: "0 0 16 16", enableBackground: "new 0 0 16 16", xmlSpace: "preserve" },
-                    React.createElement("g", { id: "chevron_right" },
+                    React.createElement("g", null,
                         React.createElement("g", null,
@@ -50,3 +50,3 @@ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.71,7.29l-4-4C6.53,3.11,6.28,3,6,3C5.45,3,5,3.45,5,4\n                      c0,0.28,0.11,0.53,0.29,0.71L8.59,8l-3.29,3.29C5.11,11.47,5,11.72,5,12c0,0.55,0.45,1,1,1c0.28,0,0.53-0.11,0.71-0.29l4-4\n                      C10.89,8.53,11,8.28,11,8C11,7.72,10.89,7.47,10.71,7.29z", className: "rct-tree-item-arrow-path" }))))))));
             // TODO have only root li component create all the classes
-            return (React.createElement("li", __assign({}, context.itemContainerWithChildrenProps, { role: "none", className: cx('rct-tree-item-li', item.hasChildren && 'rct-tree-item-li-hasChildren', context.isSelected && 'rct-tree-item-li-selected', context.isExpanded && 'rct-tree-item-li-expanded', context.isFocused && 'rct-tree-item-li-focused', context.isDraggingOver && 'rct-tree-item-li-dragging-over', context.isSearchMatching && 'rct-tree-item-li-search-match') }),
+            return (React.createElement("li", __assign({}, context.itemContainerWithChildrenProps, { className: cx('rct-tree-item-li', item.hasChildren && 'rct-tree-item-li-hasChildren', context.isSelected && 'rct-tree-item-li-selected', context.isExpanded && 'rct-tree-item-li-expanded', context.isFocused && 'rct-tree-item-li-focused', context.isDraggingOver && 'rct-tree-item-li-dragging-over', context.isSearchMatching && 'rct-tree-item-li-search-match') }),
                 React.createElement("div", __assign({}, context.itemContainerWithoutChildrenProps, { style: { paddingLeft: (depth + 1) * ((_b = renderers.renderDepthOffset) !== null && _b !== void 0 ? _b : 10) + "px" }, className: cx('rct-tree-item-title-container', item.hasChildren && 'rct-tree-item-title-container-hasChildren', context.isSelected && 'rct-tree-item-title-container-selected', context.isExpanded && 'rct-tree-item-title-container-expanded', context.isFocused && 'rct-tree-item-title-container-focused', context.isDraggingOver && 'rct-tree-item-title-container-dragging-over', context.isSearchMatching && 'rct-tree-item-title-container-search-match') }),
@@ -84,2 +84,13 @@ arrow,
                 React.createElement("input", __assign({}, inputProps, { className: cx('rct-tree-search-input') }))));
+        }, renderLiveDescriptorContainer: function (_a) {
+            var tree = _a.tree, children = _a.children;
+            return (React.createElement("div", { id: "rct-livedescription-" + tree.treeId, style: {
+                    clip: 'rect(0 0 0 0)',
+                    clipPath: 'inset(50%)',
+                    height: '1px',
+                    overflow: 'hidden',
+                    position: 'absolute',
+                    whiteSpace: 'nowrap',
+                    width: '1px',
+                } }, children));
         }, renderDepthOffset: 4 }, renderers);
@@ -86,0 +97,0 @@ newRenderers.renderItem.displayName = 'RenderItem';

lib/cjs/tree/Tree.js

@@ -40,2 +40,4 @@ var __assign = (this && this.__assign) || function () {
         rootItem: props.rootItem,
+        treeLabel: props.treeLabel,
+        treeLabelledBy: props.treeLabelledBy,
         getItemsLinearly: function () { return getItemsLinearly(props.rootItem, viewState, environment.items); },
@@ -42,0 +44,0 @@ treeInformation: treeInformation,

lib/cjs/tree/TreeManager.js

@@ -22,2 +22,3 @@ var __assign = (this && this.__assign) || function () {
 import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { LiveDescription } from './LiveDescription';
 export var TreeManager = function () {
@@ -43,2 +44,3 @@ var _a;
     var treeChildren = (React.createElement(React.Fragment, null,
+        React.createElement(LiveDescription, null),
         React.createElement(TreeItemChildren, { depth: 0, parentId: treeId }, rootChildren),
@@ -45,0 +47,0 @@ React.createElement(DragBetweenLine, { treeId: treeId }),

lib/cjs/tree/useCreatedTreeInformation.js

@@ -20,3 +20,10 @@ import { useMemo } from 'react';
         });
-    }, [environment.activeTreeId, (_a = environment.viewState[tree.treeId]) === null || _a === void 0 ? void 0 : _a.selectedItems, renamingItem, tree.treeId, search]);
+    }, [
+        environment.activeTreeId,
+        (_a = environment.viewState[tree.treeId]) === null || _a === void 0 ? void 0 : _a.selectedItems,
+        renamingItem,
+        tree.treeId,
+        search,
+        dnd.isProgrammaticallyDragging,
+    ]);
 };

lib/cjs/treeItem/TreeItem.js

@@ -15,6 +15,3 @@ import React, { useMemo, useState } from 'react';
     var item = environment.items[props.itemIndex];
-    var isExpanded = useMemo(function () { var _a; return (_a = viewState.expandedItems) === null || _a === void 0 ? void 0 : _a.includes(props.itemIndex); }, [
-        props.itemIndex,
-        viewState.expandedItems,
-    ]);
+    var isExpanded = useMemo(function () { var _a; return (_a = viewState.expandedItems) === null || _a === void 0 ? void 0 : _a.includes(props.itemIndex); }, [props.itemIndex, viewState.expandedItems]);
     // Safely assume that renderContext exists, because if not, item also does not exist and the
@@ -21,0 +18,0 @@ // component will exit early anyways

lib/cjs/treeItem/useTreeItemRenderContext.d.ts

@@ -16,2 +16,3 @@ import { TreeItem } from '../types';
     canDrag?: boolean | undefined;
+    canDropOn?: boolean | undefined;
     primaryAction: () => void;
@@ -18,0 +19,0 @@ startRenamingItem: () => void;

lib/cjs/treeItem/useTreeItemRenderContext.js

@@ -41,3 +41,3 @@ var __assign = (this && this.__assign) || function () {
         var _a, _b;
-        var _c, _d, _e, _f, _g, _h;
+        var _c, _d, _e, _f, _g, _h, _j, _k;
         if (!item) {
@@ -54,3 +54,4 @@ return undefined;
             itemsToDrag.map(function (item) { var _a; return (_a = item.canMove) !== null && _a !== void 0 ? _a : true; }).reduce(function (a, b) { return a && b; }, true);
-        // console.log(canDrag, selectedItems, environment.canDragAndDrop)
+        var canDropOn = environment.canDragAndDrop &&
+            !!((_h = (_g = dnd.viableDragPositions) === null || _g === void 0 ? void 0 : _g[treeId]) === null || _h === void 0 ? void 0 : _h.find(function (position) { return position.targetType === 'item' && position.targetItem === item.index; }));
         var actions = {
@@ -115,4 +116,4 @@ // TODO disable most actions during rename
         var renderFlags = {
-            isSelected: (_g = viewState === null || viewState === void 0 ? void 0 : viewState.selectedItems) === null || _g === void 0 ? void 0 : _g.includes(item.index),
-            isExpanded: (_h = viewState === null || viewState === void 0 ? void 0 : viewState.expandedItems) === null || _h === void 0 ? void 0 : _h.includes(item.index),
+            isSelected: (_j = viewState === null || viewState === void 0 ? void 0 : viewState.selectedItems) === null || _j === void 0 ? void 0 : _j.includes(item.index),
+            isExpanded: (_k = viewState === null || viewState === void 0 ? void 0 : viewState.expandedItems) === null || _k === void 0 ? void 0 : _k.includes(item.index),
             isFocused: (viewState === null || viewState === void 0 ? void 0 : viewState.focusedItem) === item.index,
@@ -127,4 +128,5 @@ isRenaming: renamingItem === item.index,
             canDrag: canDrag,
+            canDropOn: canDropOn,
         };
-        var interactiveElementProps = __assign(__assign(__assign({}, interactionManager.createInteractiveElementProps(item, treeId, actions, renderFlags)), { role: 'treeitem', 'aria-expanded': item.hasChildren ? (renderFlags.isExpanded ? 'true' : 'false') : undefined }), (_a = {},
+        var interactiveElementProps = __assign(__assign({}, interactionManager.createInteractiveElementProps(item, treeId, actions, renderFlags)), (_a = {},
             _a['data-rct-item-interactive'] = true,
@@ -138,3 +140,5 @@ _a['data-rct-item-focus'] = renderFlags.isFocused ? 'true' : 'false',
         var itemContainerWithChildrenProps = {
-            role: 'none',
+            role: 'treeitem',
+            'aria-selected': renderFlags.isSelected,
+            'aria-expanded': item.hasChildren ? (renderFlags.isExpanded ? 'true' : 'false') : undefined,
         };
@@ -141,0 +145,0 @@ var arrowProps = {

lib/cjs/types.d.ts

@@ -41,2 +41,3 @@ import React, { FormHTMLAttributes, HTMLProps, InputHTMLAttributes, Ref } from 'react';
     canDrag?: boolean;
+    canDropOn?: boolean;
 }
@@ -66,3 +67,3 @@ export interface TreeItemRenderContext extends TreeItemActions, TreeItemRenderFlags {
         info: TreeInformation;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
     renderItemTitle?: (props: {
@@ -73,3 +74,3 @@ title: string;
         info: TreeInformation;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null | string;
     renderItemArrow?: (props: {
@@ -79,3 +80,3 @@ item: TreeItem<T>;
         info: TreeInformation;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
     renderRenameInput?: (props: {
@@ -87,9 +88,9 @@ item: TreeItem<T>;
         formProps: FormHTMLAttributes<HTMLFormElement>;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
     renderDraggingItem?: (props: {
         items: Array<TreeItem<T>>;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
     renderDraggingItemTitle?: (props: {
         items: Array<TreeItem<T>>;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
     renderItemsContainer?: (props: {
@@ -99,3 +100,3 @@ children: React.ReactNode;
         info: TreeInformation;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
     renderTreeContainer?: (props: {
@@ -105,10 +106,14 @@ children: React.ReactNode;
         info: TreeInformation;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
     renderDragBetweenLine?: (props: {
         draggingPosition: DraggingPosition;
         lineProps: HTMLProps<any>;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
     renderSearchInput?: (props: {
         inputProps: HTMLProps<HTMLInputElement>;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
+    renderLiveDescriptorContainer?: (props: {
+        children: React.ReactNode;
+        tree: TreeConfiguration;
+    }) => React.ReactElement | null;
     renderDepthOffset?: number;
@@ -140,2 +145,3 @@ }
     doesSearchMatchItem?: (search: string, item: TreeItem<T>, itemTitle: string) => boolean;
+    showLiveDescription?: boolean;
 }
@@ -199,2 +205,3 @@ export interface IndividualTreeViewState {
     keyboardBindings?: KeyboardBindings;
+    liveDescriptors?: LiveDescriptors;
     getItemTitle: (item: TreeItem<T>) => string;
@@ -221,3 +228,5 @@ }
     draggingPosition?: DraggingPosition;
-    viableDraggingPositions?: DraggingPosition[];
+    viableDragPositions?: {
+        [treeId: string]: DraggingPosition[];
+    };
     linearItems?: Array<{
@@ -252,2 +261,3 @@ item: TreeItemIndex;
     keyboardBindings?: KeyboardBindings;
+    liveDescriptors?: LiveDescriptors;
     getItemTitle: (item: TreeItem<T>) => string;
@@ -327,1 +337,42 @@ children: JSX.Element | JSX.Element[] | null;
 }
+/**
+ * Live descriptors are written in an aria live region describing the state of the
+ * tree to accessibility readers. They are displayed in a visually hidden area at the
+ * bottom of the tree. Each descriptor composes a HTML string. Variables in the form
+ * of {variableName} can be used.
+ *
+ * The {keybinding:bindingname} variable referns to a specific keybinding, i.e. {keybinding:primaryAction}
+ * is a valid variable.
+ *
+ * See the implementation of the `defaultLiveDescriptors` for more details.
+ */
+export interface LiveDescriptors {
+    /**
+     * Supports the following variables:
+     * {treeLabel} {keybinding:bindingname}
+     */
+    introduction: string;
+    /**
+     * Supports the following variables:
+     * {renamingItem} {keybinding:bindingname}
+     */
+    renamingItem: string;
+    /**
+     * Supports the following variables:
+     * {keybinding:bindingname}
+     */
+    searching: string;
+    /**
+     * Supports the following variables:
+     * {dropTarget} {dragItems} {keybinding:bindingname}
+     */
+    programmaticallyDragging: string;
+    /**
+     * Will be displayed in addition to the programmaticallyDragging description,
+     * but with the aria-live attribute assertive.
+     *
+     * Supports the following variables:
+     * {dropTarget} {dragItems} {keybinding:bindingname}
+     */
+    programmaticallyDraggingTarget: string;
+}

lib/esm/controlledEnvironment/DragAndDropProvider.js

@@ -200,2 +200,3 @@ "use strict";
         onDragOverTreeHandler: onDragOverTreeHandler,
+        viableDragPositions: viableDragPositions,
     };
@@ -202,0 +203,0 @@ return React.createElement(DragAndDropContext.Provider, { value: dnd }, props.children);

lib/esm/hotkeys/useHotkey.js

@@ -61,3 +61,3 @@ "use strict";
         if (match) {
-            onHit(e);
+            requestAnimationFrame(function () { return onHit(e); });
         }
@@ -64,0 +64,0 @@ pressedKeys.current = pressedKeys.current.filter(function (key) { return key !== e.key; });

lib/esm/interactionMode/ClickArrowToExpandInteractionManager.js

@@ -36,3 +36,3 @@ "use strict";
             onDragStart: function (e) {
-                e.dataTransfer.dropEffect = 'copy'; // TODO
+                e.dataTransfer.dropEffect = 'move'; // TODO
                 // e.dataTransfer.setDragImage(environment.renderDraggingItem(viewState.selectedItems), 0, 0);
@@ -39,0 +39,0 @@ actions.startDragging();

lib/esm/interactionMode/ClickItemToExpandInteractionManager.js

@@ -40,3 +40,3 @@ "use strict";
             onDragStart: function (e) {
-                e.dataTransfer.dropEffect = 'copy'; // TODO
+                e.dataTransfer.dropEffect = 'move'; // TODO
                 // e.dataTransfer.setDragImage(environment.renderDraggingItem(viewState.selectedItems), 0, 0);
@@ -43,0 +43,0 @@ actions.startDragging();

lib/esm/interactionMode/DoubleClickItemToExpandInteractionManager.js

@@ -44,3 +44,3 @@ "use strict";
             onDragStart: function (e) {
-                e.dataTransfer.dropEffect = 'copy'; // TODO
+                e.dataTransfer.dropEffect = 'move'; // TODO
                 // e.dataTransfer.setDragImage(environment.renderDraggingItem(viewState.selectedItems), 0, 0);
@@ -47,0 +47,0 @@ actions.startDragging();

lib/esm/renderers/createDefaultRenderers.js

@@ -44,6 +44,6 @@ "use strict";
                 (context.isExpanded ? (react_1.default.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", viewBox: "0 0 16 16", enableBackground: "new 0 0 16 16", xmlSpace: "preserve" },
-                    react_1.default.createElement("g", { id: "chevron_down" },
+                    react_1.default.createElement("g", null,
                         react_1.default.createElement("g", null,
                             react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12,5c-0.28,0-0.53,0.11-0.71,0.29L8,8.59L4.71,5.29C4.53,5.11,4.28,5,4,5\n                      C3.45,5,3,5.45,3,6c0,0.28,0.11,0.53,0.29,0.71l4,4C7.47,10.89,7.72,11,8,11s0.53-0.11,0.71-0.29l4-4C12.89,6.53,13,6.28,13,6\n                      C13,5.45,12.55,5,12,5z", className: "rct-tree-item-arrow-path" }))))) : (react_1.default.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", viewBox: "0 0 16 16", enableBackground: "new 0 0 16 16", xmlSpace: "preserve" },
-                    react_1.default.createElement("g", { id: "chevron_right" },
+                    react_1.default.createElement("g", null,
                         react_1.default.createElement("g", null,
@@ -56,3 +56,3 @@ react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.71,7.29l-4-4C6.53,3.11,6.28,3,6,3C5.45,3,5,3.45,5,4\n                      c0,0.28,0.11,0.53,0.29,0.71L8.59,8l-3.29,3.29C5.11,11.47,5,11.72,5,12c0,0.55,0.45,1,1,1c0.28,0,0.53-0.11,0.71-0.29l4-4\n                      C10.89,8.53,11,8.28,11,8C11,7.72,10.89,7.47,10.71,7.29z", className: "rct-tree-item-arrow-path" }))))))));
             // TODO have only root li component create all the classes
-            return (react_1.default.createElement("li", __assign({}, context.itemContainerWithChildrenProps, { role: "none", className: cx('rct-tree-item-li', item.hasChildren && 'rct-tree-item-li-hasChildren', context.isSelected && 'rct-tree-item-li-selected', context.isExpanded && 'rct-tree-item-li-expanded', context.isFocused && 'rct-tree-item-li-focused', context.isDraggingOver && 'rct-tree-item-li-dragging-over', context.isSearchMatching && 'rct-tree-item-li-search-match') }),
+            return (react_1.default.createElement("li", __assign({}, context.itemContainerWithChildrenProps, { className: cx('rct-tree-item-li', item.hasChildren && 'rct-tree-item-li-hasChildren', context.isSelected && 'rct-tree-item-li-selected', context.isExpanded && 'rct-tree-item-li-expanded', context.isFocused && 'rct-tree-item-li-focused', context.isDraggingOver && 'rct-tree-item-li-dragging-over', context.isSearchMatching && 'rct-tree-item-li-search-match') }),
                 react_1.default.createElement("div", __assign({}, context.itemContainerWithoutChildrenProps, { style: { paddingLeft: (depth + 1) * ((_b = renderers.renderDepthOffset) !== null && _b !== void 0 ? _b : 10) + "px" }, className: cx('rct-tree-item-title-container', item.hasChildren && 'rct-tree-item-title-container-hasChildren', context.isSelected && 'rct-tree-item-title-container-selected', context.isExpanded && 'rct-tree-item-title-container-expanded', context.isFocused && 'rct-tree-item-title-container-focused', context.isDraggingOver && 'rct-tree-item-title-container-dragging-over', context.isSearchMatching && 'rct-tree-item-title-container-search-match') }),
@@ -90,2 +90,13 @@ arrow,
                 react_1.default.createElement("input", __assign({}, inputProps, { className: cx('rct-tree-search-input') }))));
+        }, renderLiveDescriptorContainer: function (_a) {
+            var tree = _a.tree, children = _a.children;
+            return (react_1.default.createElement("div", { id: "rct-livedescription-" + tree.treeId, style: {
+                    clip: 'rect(0 0 0 0)',
+                    clipPath: 'inset(50%)',
+                    height: '1px',
+                    overflow: 'hidden',
+                    position: 'absolute',
+                    whiteSpace: 'nowrap',
+                    width: '1px',
+                } }, children));
         }, renderDepthOffset: 4 }, renderers);
@@ -92,0 +103,0 @@ newRenderers.renderItem.displayName = 'RenderItem';

lib/esm/tree/Tree.js

@@ -63,2 +63,4 @@ "use strict";
         rootItem: props.rootItem,
+        treeLabel: props.treeLabel,
+        treeLabelledBy: props.treeLabelledBy,
         getItemsLinearly: function () { return getItemsLinearly_1.getItemsLinearly(props.rootItem, viewState, environment.items); },
@@ -65,0 +67,0 @@ treeInformation: treeInformation,

lib/esm/tree/TreeManager.js

@@ -44,2 +44,3 @@ "use strict";
 var DragAndDropProvider_1 = require("../controlledEnvironment/DragAndDropProvider");
+var LiveDescription_1 = require("./LiveDescription");
 var TreeManager = function () {
@@ -65,2 +66,3 @@ var _a;
     var treeChildren = (React.createElement(React.Fragment, null,
+        React.createElement(LiveDescription_1.LiveDescription, null),
         React.createElement(TreeItemChildren_1.TreeItemChildren, { depth: 0, parentId: treeId }, rootChildren),
@@ -67,0 +69,0 @@ React.createElement(DragBetweenLine_1.DragBetweenLine, { treeId: treeId }),

lib/esm/tree/useCreatedTreeInformation.js

@@ -23,4 +23,11 @@ "use strict";
         });
-    }, [environment.activeTreeId, (_a = environment.viewState[tree.treeId]) === null || _a === void 0 ? void 0 : _a.selectedItems, renamingItem, tree.treeId, search]);
+    }, [
+        environment.activeTreeId,
+        (_a = environment.viewState[tree.treeId]) === null || _a === void 0 ? void 0 : _a.selectedItems,
+        renamingItem,
+        tree.treeId,
+        search,
+        dnd.isProgrammaticallyDragging,
+    ]);
 };
 exports.useCreatedTreeInformation = useCreatedTreeInformation;

lib/esm/treeItem/TreeItem.js

@@ -37,6 +37,3 @@ "use strict";
     var item = environment.items[props.itemIndex];
-    var isExpanded = react_1.useMemo(function () { var _a; return (_a = viewState.expandedItems) === null || _a === void 0 ? void 0 : _a.includes(props.itemIndex); }, [
-        props.itemIndex,
-        viewState.expandedItems,
-    ]);
+    var isExpanded = react_1.useMemo(function () { var _a; return (_a = viewState.expandedItems) === null || _a === void 0 ? void 0 : _a.includes(props.itemIndex); }, [props.itemIndex, viewState.expandedItems]);
     // Safely assume that renderContext exists, because if not, item also does not exist and the
@@ -43,0 +40,0 @@ // component will exit early anyways

lib/esm/treeItem/useTreeItemRenderContext.d.ts

@@ -16,2 +16,3 @@ import { TreeItem } from '../types';
     canDrag?: boolean | undefined;
+    canDropOn?: boolean | undefined;
     primaryAction: () => void;
@@ -18,0 +19,0 @@ startRenamingItem: () => void;

lib/esm/treeItem/useTreeItemRenderContext.js

@@ -44,3 +44,3 @@ "use strict";
         var _a, _b;
-        var _c, _d, _e, _f, _g, _h;
+        var _c, _d, _e, _f, _g, _h, _j, _k;
         if (!item) {
@@ -57,3 +57,4 @@ return undefined;
             itemsToDrag.map(function (item) { var _a; return (_a = item.canMove) !== null && _a !== void 0 ? _a : true; }).reduce(function (a, b) { return a && b; }, true);
-        // console.log(canDrag, selectedItems, environment.canDragAndDrop)
+        var canDropOn = environment.canDragAndDrop &&
+            !!((_h = (_g = dnd.viableDragPositions) === null || _g === void 0 ? void 0 : _g[treeId]) === null || _h === void 0 ? void 0 : _h.find(function (position) { return position.targetType === 'item' && position.targetItem === item.index; }));
         var actions = {
@@ -118,4 +119,4 @@ // TODO disable most actions during rename
         var renderFlags = {
-            isSelected: (_g = viewState === null || viewState === void 0 ? void 0 : viewState.selectedItems) === null || _g === void 0 ? void 0 : _g.includes(item.index),
-            isExpanded: (_h = viewState === null || viewState === void 0 ? void 0 : viewState.expandedItems) === null || _h === void 0 ? void 0 : _h.includes(item.index),
+            isSelected: (_j = viewState === null || viewState === void 0 ? void 0 : viewState.selectedItems) === null || _j === void 0 ? void 0 : _j.includes(item.index),
+            isExpanded: (_k = viewState === null || viewState === void 0 ? void 0 : viewState.expandedItems) === null || _k === void 0 ? void 0 : _k.includes(item.index),
             isFocused: (viewState === null || viewState === void 0 ? void 0 : viewState.focusedItem) === item.index,
@@ -130,4 +131,5 @@ isRenaming: renamingItem === item.index,
             canDrag: canDrag,
+            canDropOn: canDropOn,
         };
-        var interactiveElementProps = __assign(__assign(__assign({}, interactionManager.createInteractiveElementProps(item, treeId, actions, renderFlags)), { role: 'treeitem', 'aria-expanded': item.hasChildren ? (renderFlags.isExpanded ? 'true' : 'false') : undefined }), (_a = {},
+        var interactiveElementProps = __assign(__assign({}, interactionManager.createInteractiveElementProps(item, treeId, actions, renderFlags)), (_a = {},
             _a['data-rct-item-interactive'] = true,
@@ -141,3 +143,5 @@ _a['data-rct-item-focus'] = renderFlags.isFocused ? 'true' : 'false',
         var itemContainerWithChildrenProps = {
-            role: 'none',
+            role: 'treeitem',
+            'aria-selected': renderFlags.isSelected,
+            'aria-expanded': item.hasChildren ? (renderFlags.isExpanded ? 'true' : 'false') : undefined,
         };
@@ -144,0 +148,0 @@ var arrowProps = {

lib/esm/types.d.ts

@@ -41,2 +41,3 @@ import React, { FormHTMLAttributes, HTMLProps, InputHTMLAttributes, Ref } from 'react';
     canDrag?: boolean;
+    canDropOn?: boolean;
 }
@@ -66,3 +67,3 @@ export interface TreeItemRenderContext extends TreeItemActions, TreeItemRenderFlags {
         info: TreeInformation;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
     renderItemTitle?: (props: {
@@ -73,3 +74,3 @@ title: string;
         info: TreeInformation;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null | string;
     renderItemArrow?: (props: {
@@ -79,3 +80,3 @@ item: TreeItem<T>;
         info: TreeInformation;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
     renderRenameInput?: (props: {
@@ -87,9 +88,9 @@ item: TreeItem<T>;
         formProps: FormHTMLAttributes<HTMLFormElement>;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
     renderDraggingItem?: (props: {
         items: Array<TreeItem<T>>;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
     renderDraggingItemTitle?: (props: {
         items: Array<TreeItem<T>>;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
     renderItemsContainer?: (props: {
@@ -99,3 +100,3 @@ children: React.ReactNode;
         info: TreeInformation;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
     renderTreeContainer?: (props: {
@@ -105,10 +106,14 @@ children: React.ReactNode;
         info: TreeInformation;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
     renderDragBetweenLine?: (props: {
         draggingPosition: DraggingPosition;
         lineProps: HTMLProps<any>;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
     renderSearchInput?: (props: {
         inputProps: HTMLProps<HTMLInputElement>;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
+    renderLiveDescriptorContainer?: (props: {
+        children: React.ReactNode;
+        tree: TreeConfiguration;
+    }) => React.ReactElement | null;
     renderDepthOffset?: number;
@@ -140,2 +145,3 @@ }
     doesSearchMatchItem?: (search: string, item: TreeItem<T>, itemTitle: string) => boolean;
+    showLiveDescription?: boolean;
 }
@@ -199,2 +205,3 @@ export interface IndividualTreeViewState {
     keyboardBindings?: KeyboardBindings;
+    liveDescriptors?: LiveDescriptors;
     getItemTitle: (item: TreeItem<T>) => string;
@@ -221,3 +228,5 @@ }
     draggingPosition?: DraggingPosition;
-    viableDraggingPositions?: DraggingPosition[];
+    viableDragPositions?: {
+        [treeId: string]: DraggingPosition[];
+    };
     linearItems?: Array<{
@@ -252,2 +261,3 @@ item: TreeItemIndex;
     keyboardBindings?: KeyboardBindings;
+    liveDescriptors?: LiveDescriptors;
     getItemTitle: (item: TreeItem<T>) => string;
@@ -327,1 +337,42 @@ children: JSX.Element | JSX.Element[] | null;
 }
+/**
+ * Live descriptors are written in an aria live region describing the state of the
+ * tree to accessibility readers. They are displayed in a visually hidden area at the
+ * bottom of the tree. Each descriptor composes a HTML string. Variables in the form
+ * of {variableName} can be used.
+ *
+ * The {keybinding:bindingname} variable referns to a specific keybinding, i.e. {keybinding:primaryAction}
+ * is a valid variable.
+ *
+ * See the implementation of the `defaultLiveDescriptors` for more details.
+ */
+export interface LiveDescriptors {
+    /**
+     * Supports the following variables:
+     * {treeLabel} {keybinding:bindingname}
+     */
+    introduction: string;
+    /**
+     * Supports the following variables:
+     * {renamingItem} {keybinding:bindingname}
+     */
+    renamingItem: string;
+    /**
+     * Supports the following variables:
+     * {keybinding:bindingname}
+     */
+    searching: string;
+    /**
+     * Supports the following variables:
+     * {dropTarget} {dragItems} {keybinding:bindingname}
+     */
+    programmaticallyDragging: string;
+    /**
+     * Will be displayed in addition to the programmaticallyDragging description,
+     * but with the aria-live attribute assertive.
+     *
+     * Supports the following variables:
+     * {dropTarget} {dragItems} {keybinding:bindingname}
+     */
+    programmaticallyDraggingTarget: string;
+}

lib/esnext/controlledEnvironment/DragAndDropProvider.js

@@ -177,4 +177,5 @@ var __assign = (this && this.__assign) || function () {
         onDragOverTreeHandler: onDragOverTreeHandler,
+        viableDragPositions: viableDragPositions,
     };
     return React.createElement(DragAndDropContext.Provider, { value: dnd }, props.children);
 };

lib/esnext/hotkeys/useHotkey.js

@@ -58,3 +58,3 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
         if (match) {
-            onHit(e);
+            requestAnimationFrame(function () { return onHit(e); });
         }
@@ -61,0 +61,0 @@ pressedKeys.current = pressedKeys.current.filter(function (key) { return key !== e.key; });

lib/esnext/interactionMode/ClickArrowToExpandInteractionManager.js

@@ -33,3 +33,3 @@ import { InteractionMode, } from '../types';
             onDragStart: function (e) {
-                e.dataTransfer.dropEffect = 'copy'; // TODO
+                e.dataTransfer.dropEffect = 'move'; // TODO
                 // e.dataTransfer.setDragImage(environment.renderDraggingItem(viewState.selectedItems), 0, 0);
@@ -36,0 +36,0 @@ actions.startDragging();

lib/esnext/interactionMode/ClickItemToExpandInteractionManager.js

@@ -37,3 +37,3 @@ import { InteractionMode, } from '../types';
             onDragStart: function (e) {
-                e.dataTransfer.dropEffect = 'copy'; // TODO
+                e.dataTransfer.dropEffect = 'move'; // TODO
                 // e.dataTransfer.setDragImage(environment.renderDraggingItem(viewState.selectedItems), 0, 0);
@@ -40,0 +40,0 @@ actions.startDragging();

lib/esnext/interactionMode/DoubleClickItemToExpandInteractionManager.js

@@ -41,3 +41,3 @@ import { InteractionMode, } from '../types';
             onDragStart: function (e) {
-                e.dataTransfer.dropEffect = 'copy'; // TODO
+                e.dataTransfer.dropEffect = 'move'; // TODO
                 // e.dataTransfer.setDragImage(environment.renderDraggingItem(viewState.selectedItems), 0, 0);
@@ -44,0 +44,0 @@ actions.startDragging();

lib/esnext/renderers/createDefaultRenderers.js

@@ -38,6 +38,6 @@ var __assign = (this && this.__assign) || function () {
                 (context.isExpanded ? (React.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", viewBox: "0 0 16 16", enableBackground: "new 0 0 16 16", xmlSpace: "preserve" },
-                    React.createElement("g", { id: "chevron_down" },
+                    React.createElement("g", null,
                         React.createElement("g", null,
                             React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12,5c-0.28,0-0.53,0.11-0.71,0.29L8,8.59L4.71,5.29C4.53,5.11,4.28,5,4,5\n                      C3.45,5,3,5.45,3,6c0,0.28,0.11,0.53,0.29,0.71l4,4C7.47,10.89,7.72,11,8,11s0.53-0.11,0.71-0.29l4-4C12.89,6.53,13,6.28,13,6\n                      C13,5.45,12.55,5,12,5z", className: "rct-tree-item-arrow-path" }))))) : (React.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", viewBox: "0 0 16 16", enableBackground: "new 0 0 16 16", xmlSpace: "preserve" },
-                    React.createElement("g", { id: "chevron_right" },
+                    React.createElement("g", null,
                         React.createElement("g", null,
@@ -50,3 +50,3 @@ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.71,7.29l-4-4C6.53,3.11,6.28,3,6,3C5.45,3,5,3.45,5,4\n                      c0,0.28,0.11,0.53,0.29,0.71L8.59,8l-3.29,3.29C5.11,11.47,5,11.72,5,12c0,0.55,0.45,1,1,1c0.28,0,0.53-0.11,0.71-0.29l4-4\n                      C10.89,8.53,11,8.28,11,8C11,7.72,10.89,7.47,10.71,7.29z", className: "rct-tree-item-arrow-path" }))))))));
             // TODO have only root li component create all the classes
-            return (React.createElement("li", __assign({}, context.itemContainerWithChildrenProps, { role: "none", className: cx('rct-tree-item-li', item.hasChildren && 'rct-tree-item-li-hasChildren', context.isSelected && 'rct-tree-item-li-selected', context.isExpanded && 'rct-tree-item-li-expanded', context.isFocused && 'rct-tree-item-li-focused', context.isDraggingOver && 'rct-tree-item-li-dragging-over', context.isSearchMatching && 'rct-tree-item-li-search-match') }),
+            return (React.createElement("li", __assign({}, context.itemContainerWithChildrenProps, { className: cx('rct-tree-item-li', item.hasChildren && 'rct-tree-item-li-hasChildren', context.isSelected && 'rct-tree-item-li-selected', context.isExpanded && 'rct-tree-item-li-expanded', context.isFocused && 'rct-tree-item-li-focused', context.isDraggingOver && 'rct-tree-item-li-dragging-over', context.isSearchMatching && 'rct-tree-item-li-search-match') }),
                 React.createElement("div", __assign({}, context.itemContainerWithoutChildrenProps, { style: { paddingLeft: (depth + 1) * ((_b = renderers.renderDepthOffset) !== null && _b !== void 0 ? _b : 10) + "px" }, className: cx('rct-tree-item-title-container', item.hasChildren && 'rct-tree-item-title-container-hasChildren', context.isSelected && 'rct-tree-item-title-container-selected', context.isExpanded && 'rct-tree-item-title-container-expanded', context.isFocused && 'rct-tree-item-title-container-focused', context.isDraggingOver && 'rct-tree-item-title-container-dragging-over', context.isSearchMatching && 'rct-tree-item-title-container-search-match') }),
@@ -84,2 +84,13 @@ arrow,
                 React.createElement("input", __assign({}, inputProps, { className: cx('rct-tree-search-input') }))));
+        }, renderLiveDescriptorContainer: function (_a) {
+            var tree = _a.tree, children = _a.children;
+            return (React.createElement("div", { id: "rct-livedescription-" + tree.treeId, style: {
+                    clip: 'rect(0 0 0 0)',
+                    clipPath: 'inset(50%)',
+                    height: '1px',
+                    overflow: 'hidden',
+                    position: 'absolute',
+                    whiteSpace: 'nowrap',
+                    width: '1px',
+                } }, children));
         }, renderDepthOffset: 4 }, renderers);
@@ -86,0 +97,0 @@ newRenderers.renderItem.displayName = 'RenderItem';

lib/esnext/tree/Tree.js

@@ -40,2 +40,4 @@ var __assign = (this && this.__assign) || function () {
         rootItem: props.rootItem,
+        treeLabel: props.treeLabel,
+        treeLabelledBy: props.treeLabelledBy,
         getItemsLinearly: function () { return getItemsLinearly(props.rootItem, viewState, environment.items); },
@@ -42,0 +44,0 @@ treeInformation: treeInformation,

lib/esnext/tree/TreeManager.js

@@ -22,2 +22,3 @@ var __assign = (this && this.__assign) || function () {
 import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { LiveDescription } from './LiveDescription';
 export var TreeManager = function () {
@@ -43,2 +44,3 @@ var _a;
     var treeChildren = (React.createElement(React.Fragment, null,
+        React.createElement(LiveDescription, null),
         React.createElement(TreeItemChildren, { depth: 0, parentId: treeId }, rootChildren),
@@ -45,0 +47,0 @@ React.createElement(DragBetweenLine, { treeId: treeId }),

lib/esnext/tree/useCreatedTreeInformation.js

@@ -20,3 +20,10 @@ import { useMemo } from 'react';
         });
-    }, [environment.activeTreeId, (_a = environment.viewState[tree.treeId]) === null || _a === void 0 ? void 0 : _a.selectedItems, renamingItem, tree.treeId, search]);
+    }, [
+        environment.activeTreeId,
+        (_a = environment.viewState[tree.treeId]) === null || _a === void 0 ? void 0 : _a.selectedItems,
+        renamingItem,
+        tree.treeId,
+        search,
+        dnd.isProgrammaticallyDragging,
+    ]);
 };

lib/esnext/treeItem/TreeItem.js

@@ -15,6 +15,3 @@ import React, { useMemo, useState } from 'react';
     var item = environment.items[props.itemIndex];
-    var isExpanded = useMemo(function () { var _a; return (_a = viewState.expandedItems) === null || _a === void 0 ? void 0 : _a.includes(props.itemIndex); }, [
-        props.itemIndex,
-        viewState.expandedItems,
-    ]);
+    var isExpanded = useMemo(function () { var _a; return (_a = viewState.expandedItems) === null || _a === void 0 ? void 0 : _a.includes(props.itemIndex); }, [props.itemIndex, viewState.expandedItems]);
     // Safely assume that renderContext exists, because if not, item also does not exist and the
@@ -21,0 +18,0 @@ // component will exit early anyways

lib/esnext/treeItem/useTreeItemRenderContext.d.ts

@@ -16,2 +16,3 @@ import { TreeItem } from '../types';
     canDrag?: boolean | undefined;
+    canDropOn?: boolean | undefined;
     primaryAction: () => void;
@@ -18,0 +19,0 @@ startRenamingItem: () => void;

lib/esnext/treeItem/useTreeItemRenderContext.js

@@ -41,3 +41,3 @@ var __assign = (this && this.__assign) || function () {
         var _a, _b;
-        var _c, _d, _e, _f, _g, _h;
+        var _c, _d, _e, _f, _g, _h, _j, _k;
         if (!item) {
@@ -54,3 +54,4 @@ return undefined;
             itemsToDrag.map(function (item) { var _a; return (_a = item.canMove) !== null && _a !== void 0 ? _a : true; }).reduce(function (a, b) { return a && b; }, true);
-        // console.log(canDrag, selectedItems, environment.canDragAndDrop)
+        var canDropOn = environment.canDragAndDrop &&
+            !!((_h = (_g = dnd.viableDragPositions) === null || _g === void 0 ? void 0 : _g[treeId]) === null || _h === void 0 ? void 0 : _h.find(function (position) { return position.targetType === 'item' && position.targetItem === item.index; }));
         var actions = {
@@ -115,4 +116,4 @@ // TODO disable most actions during rename
         var renderFlags = {
-            isSelected: (_g = viewState === null || viewState === void 0 ? void 0 : viewState.selectedItems) === null || _g === void 0 ? void 0 : _g.includes(item.index),
-            isExpanded: (_h = viewState === null || viewState === void 0 ? void 0 : viewState.expandedItems) === null || _h === void 0 ? void 0 : _h.includes(item.index),
+            isSelected: (_j = viewState === null || viewState === void 0 ? void 0 : viewState.selectedItems) === null || _j === void 0 ? void 0 : _j.includes(item.index),
+            isExpanded: (_k = viewState === null || viewState === void 0 ? void 0 : viewState.expandedItems) === null || _k === void 0 ? void 0 : _k.includes(item.index),
             isFocused: (viewState === null || viewState === void 0 ? void 0 : viewState.focusedItem) === item.index,
@@ -127,4 +128,5 @@ isRenaming: renamingItem === item.index,
             canDrag: canDrag,
+            canDropOn: canDropOn,
         };
-        var interactiveElementProps = __assign(__assign(__assign({}, interactionManager.createInteractiveElementProps(item, treeId, actions, renderFlags)), { role: 'treeitem', 'aria-expanded': item.hasChildren ? (renderFlags.isExpanded ? 'true' : 'false') : undefined }), (_a = {},
+        var interactiveElementProps = __assign(__assign({}, interactionManager.createInteractiveElementProps(item, treeId, actions, renderFlags)), (_a = {},
             _a['data-rct-item-interactive'] = true,
@@ -138,3 +140,5 @@ _a['data-rct-item-focus'] = renderFlags.isFocused ? 'true' : 'false',
         var itemContainerWithChildrenProps = {
-            role: 'none',
+            role: 'treeitem',
+            'aria-selected': renderFlags.isSelected,
+            'aria-expanded': item.hasChildren ? (renderFlags.isExpanded ? 'true' : 'false') : undefined,
         };
@@ -141,0 +145,0 @@ var arrowProps = {

lib/esnext/types.d.ts

@@ -41,2 +41,3 @@ import React, { FormHTMLAttributes, HTMLProps, InputHTMLAttributes, Ref } from 'react';
     canDrag?: boolean;
+    canDropOn?: boolean;
 }
@@ -66,3 +67,3 @@ export interface TreeItemRenderContext extends TreeItemActions, TreeItemRenderFlags {
         info: TreeInformation;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
     renderItemTitle?: (props: {
@@ -73,3 +74,3 @@ title: string;
         info: TreeInformation;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null | string;
     renderItemArrow?: (props: {
@@ -79,3 +80,3 @@ item: TreeItem<T>;
         info: TreeInformation;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
     renderRenameInput?: (props: {
@@ -87,9 +88,9 @@ item: TreeItem<T>;
         formProps: FormHTMLAttributes<HTMLFormElement>;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
     renderDraggingItem?: (props: {
         items: Array<TreeItem<T>>;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
     renderDraggingItemTitle?: (props: {
         items: Array<TreeItem<T>>;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
     renderItemsContainer?: (props: {
@@ -99,3 +100,3 @@ children: React.ReactNode;
         info: TreeInformation;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
     renderTreeContainer?: (props: {
@@ -105,10 +106,14 @@ children: React.ReactNode;
         info: TreeInformation;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
     renderDragBetweenLine?: (props: {
         draggingPosition: DraggingPosition;
         lineProps: HTMLProps<any>;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
     renderSearchInput?: (props: {
         inputProps: HTMLProps<HTMLInputElement>;
-    }) => React.ReactNode;
+    }) => React.ReactElement | null;
+    renderLiveDescriptorContainer?: (props: {
+        children: React.ReactNode;
+        tree: TreeConfiguration;
+    }) => React.ReactElement | null;
     renderDepthOffset?: number;
@@ -140,2 +145,3 @@ }
     doesSearchMatchItem?: (search: string, item: TreeItem<T>, itemTitle: string) => boolean;
+    showLiveDescription?: boolean;
 }
@@ -199,2 +205,3 @@ export interface IndividualTreeViewState {
     keyboardBindings?: KeyboardBindings;
+    liveDescriptors?: LiveDescriptors;
     getItemTitle: (item: TreeItem<T>) => string;
@@ -221,3 +228,5 @@ }
     draggingPosition?: DraggingPosition;
-    viableDraggingPositions?: DraggingPosition[];
+    viableDragPositions?: {
+        [treeId: string]: DraggingPosition[];
+    };
     linearItems?: Array<{
@@ -252,2 +261,3 @@ item: TreeItemIndex;
     keyboardBindings?: KeyboardBindings;
+    liveDescriptors?: LiveDescriptors;
     getItemTitle: (item: TreeItem<T>) => string;
@@ -327,1 +337,42 @@ children: JSX.Element | JSX.Element[] | null;
 }
+/**
+ * Live descriptors are written in an aria live region describing the state of the
+ * tree to accessibility readers. They are displayed in a visually hidden area at the
+ * bottom of the tree. Each descriptor composes a HTML string. Variables in the form
+ * of {variableName} can be used.
+ *
+ * The {keybinding:bindingname} variable referns to a specific keybinding, i.e. {keybinding:primaryAction}
+ * is a valid variable.
+ *
+ * See the implementation of the `defaultLiveDescriptors` for more details.
+ */
+export interface LiveDescriptors {
+    /**
+     * Supports the following variables:
+     * {treeLabel} {keybinding:bindingname}
+     */
+    introduction: string;
+    /**
+     * Supports the following variables:
+     * {renamingItem} {keybinding:bindingname}
+     */
+    renamingItem: string;
+    /**
+     * Supports the following variables:
+     * {keybinding:bindingname}
+     */
+    searching: string;
+    /**
+     * Supports the following variables:
+     * {dropTarget} {dragItems} {keybinding:bindingname}
+     */
+    programmaticallyDragging: string;
+    /**
+     * Will be displayed in addition to the programmaticallyDragging description,
+     * but with the aria-live attribute assertive.
+     *
+     * Supports the following variables:
+     * {dropTarget} {dragItems} {keybinding:bindingname}
+     */
+    programmaticallyDraggingTarget: string;
+}

package.json

 {
   "name": "react-complex-tree",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "lib/cjs/index.js",
@@ -10,2 +10,5 @@ "module": "lib/esm/index.js",
   "unpkg": "lib/bundle.js",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "repository": {
@@ -59,3 +62,3 @@ "type": "git",
   },
-  "gitHead": "bd0c2f8265c693efcbcbc9013a51ac9999ede8b0"
+  "gitHead": "6eb9a0e6baf1c1fcc661fbf0b6681dfae93666c4"
 }

readme.md

@@ -7,3 +7,2 @@ # React Complex Tree
 [![](https://badgen.net/bundlephobia/minzip/react-complex-tree)](https://bundlephobia.com/package/react-complex-tree)
-[![](https://badgen.net/bundlephobia/tree-shaking/react-complex-tree)](https://bundlephobia.com/package/react-complex-tree)
 
@@ -10,0 +9,0 @@ ![Demo for React Complex Tree](http://i.imgur.com/KQ90KEs.gif)

No alert changes

Improved metrics

Total package byte prevSize

939073

increased by5.41%

Number of package files

306

increased by5.88%

Lines of code

11130

increased by5.17%

Worsened metrics

Number of lines in readme file

86

decreased by-1.15%

No dependency changes