react-complex-tree - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

lib/cjs/controlledEnvironment/InteractionManagerProvider.js

@@ -24,8 +24,7 @@ "use strict";
 var React = __importStar(require("react"));
+var react_1 = require("react");
 var types_1 = require("../types");
-var react_1 = require("react");
-var ClickItemToExpandInteractionManager_1 = require("../interactionMode/ClickItemToExpandInteractionManager");
 var ControlledTreeEnvironment_1 = require("./ControlledTreeEnvironment");
-var DoubleClickItemToExpandInteractionManager_1 = require("../interactionMode/DoubleClickItemToExpandInteractionManager");
-var ClickArrowToExpandInteractionManager_1 = require("../interactionMode/ClickArrowToExpandInteractionManager");
+var mergeInteractionManagers_1 = require("./mergeInteractionManagers");
+var buildInteractionMode_1 = require("./buildInteractionMode");
 var InteractionManagerContext = React.createContext(null);
@@ -36,17 +35,14 @@ var useInteractionManager = function () { return React.useContext(InteractionManagerContext); };
     var environment = ControlledTreeEnvironment_1.useTreeEnvironment();
+    var defaultInteractionMode = environment.defaultInteractionMode;
     var interactionManager = react_1.useMemo(function () {
         var _a;
-        if (environment.defaultInteractionMode && typeof environment.defaultInteractionMode !== 'string') {
-            return environment.defaultInteractionMode;
+        if (defaultInteractionMode && typeof defaultInteractionMode !== 'string') {
+            if (defaultInteractionMode.extends) {
+                return mergeInteractionManagers_1.mergeInteractionManagers(defaultInteractionMode, buildInteractionMode_1.buildInteractionMode(defaultInteractionMode.extends, environment));
+            }
+            else {
+                return defaultInteractionMode;
+            }
         }
-        switch ((_a = environment.defaultInteractionMode) !== null && _a !== void 0 ? _a : types_1.InteractionMode.ClickItemToExpand) {
-            case types_1.InteractionMode.DoubleClickItemToExpand:
-                return new DoubleClickItemToExpandInteractionManager_1.DoubleClickItemToExpandInteractionManager(environment);
-            case types_1.InteractionMode.ClickItemToExpand:
-                return new ClickItemToExpandInteractionManager_1.ClickItemToExpandInteractionManager(environment);
-            case types_1.InteractionMode.ClickArrowToExpand:
-                return new ClickArrowToExpandInteractionManager_1.ClickArrowToExpandInteractionManager(environment);
-            default:
-                throw Error("Unknown interaction mode " + environment.defaultInteractionMode);
-        }
+        return buildInteractionMode_1.buildInteractionMode((_a = defaultInteractionMode) !== null && _a !== void 0 ? _a : types_1.InteractionMode.ClickItemToExpand, environment);
     }, []); // TODO make sure that environment does not need to be refreshed
@@ -53,0 +49,0 @@ return (React.createElement(InteractionManagerContext.Provider, { value: interactionManager }, props.children));

lib/cjs/hotkeys/useHotkey.js

@@ -11,4 +11,4 @@ "use strict";
 var react_1 = require("react");
-var defaultKeyboardBindings_1 = require("./defaultKeyboardBindings");
 var ControlledTreeEnvironment_1 = require("../controlledEnvironment/ControlledTreeEnvironment");
+var useKeyboardBindings_1 = require("./useKeyboardBindings");
 var elementsThatCanTakeText = ['input', 'textarea'];
@@ -19,8 +19,4 @@ var useHotkey = function (combinationName, onHit, active, activatableWhileFocusingInput, deps) {
     var pressedKeys = react_1.useRef([]);
-    var possibleCombinations = react_1.useMemo(function () {
-        var _a, _b;
-        return ((_b = (_a = environment.keyboardBindings) === null || _a === void 0 ? void 0 : _a[combinationName]) !== null && _b !== void 0 ? _b : defaultKeyboardBindings_1.defaultKeyboardBindings[combinationName]).map(function (combination) {
-            return combination.split('+');
-        });
-    }, [combinationName, environment.keyboardBindings]);
+    var keyboardBindings = useKeyboardBindings_1.useKeyboardBindings();
+    var possibleCombinations = react_1.useMemo(function () { return keyboardBindings[combinationName].map(function (combination) { return combination.split('+'); }); }, [combinationName, environment.keyboardBindings]);
     useHtmlElementEventListener_1.useHtmlElementEventListener(document, 'keydown', function (e) {
@@ -27,0 +23,0 @@ if (active === false) {

lib/cjs/renderers/createDefaultRenderers.js

@@ -61,6 +61,6 @@ "use strict";
         }, renderRenameInput: function (_a) {
-            var inputProps = _a.inputProps, inputRef = _a.inputRef, submitButtonProps = _a.submitButtonProps, formProps = _a.formProps;
+            var inputProps = _a.inputProps, inputRef = _a.inputRef, submitButtonProps = _a.submitButtonProps, submitButtonRef = _a.submitButtonRef, formProps = _a.formProps;
             return (react_1.default.createElement("form", __assign({}, formProps, { className: "rct-tree-item-renaming-form" }),
                 react_1.default.createElement("input", __assign({}, inputProps, { ref: inputRef, className: "rct-tree-item-renaming-input" })),
-                react_1.default.createElement("input", __assign({}, submitButtonProps, { type: "submit", className: "rct-tree-item-renaming-submit-button", value: "\uD83D\uDDF8" }))));
+                react_1.default.createElement("input", __assign({}, submitButtonProps, { ref: submitButtonRef, type: "submit", className: "rct-tree-item-renaming-submit-button", value: "\uD83D\uDDF8" }))));
         }, renderDraggingItem: function () {
@@ -67,0 +67,0 @@ return react_1.default.createElement("div", null);

lib/cjs/tree/LiveDescription.d.ts

 import * as React from 'react';
-export declare const LiveDescription: React.FC<{}>;
+export declare const LiveDescription: React.FC;

lib/cjs/tree/LiveDescription.js

@@ -30,3 +30,4 @@ "use strict";
 var resolveLiveDescriptor_1 = require("./resolveLiveDescriptor");
-var LiveDescription = function (props) {
+var useKeyboardBindings_1 = require("../hotkeys/useKeyboardBindings");
+var LiveDescription = function () {
     var _a;
@@ -36,2 +37,3 @@ var env = ControlledTreeEnvironment_1.useTreeEnvironment();
     var dnd = DragAndDropProvider_1.useDragAndDrop();
+    var keys = useKeyboardBindings_1.useKeyboardBindings();
     if (!((_a = env.showLiveDescription) !== null && _a !== void 0 ? _a : true)) {
@@ -50,18 +52,18 @@ return null;
         return (React.createElement(MainWrapper, { tree: tree },
-            React.createElement(LiveWrapper, { live: "polite" }, resolveLiveDescriptor_1.resolveLiveDescriptor(descriptors.renamingItem, env, dnd, tree))));
+            React.createElement(LiveWrapper, { live: "polite" }, resolveLiveDescriptor_1.resolveLiveDescriptor(descriptors.renamingItem, env, dnd, tree, keys))));
     }
     else if (tree.treeInformation.isSearching) {
         return (React.createElement(MainWrapper, { tree: tree },
-            React.createElement(LiveWrapper, { live: "polite" }, resolveLiveDescriptor_1.resolveLiveDescriptor(descriptors.searching, env, dnd, tree))));
+            React.createElement(LiveWrapper, { live: "polite" }, resolveLiveDescriptor_1.resolveLiveDescriptor(descriptors.searching, env, dnd, tree, keys))));
     }
     else if (tree.treeInformation.isProgrammaticallyDragging) {
         return (React.createElement(MainWrapper, { tree: tree },
-            React.createElement(LiveWrapper, { live: "polite" }, resolveLiveDescriptor_1.resolveLiveDescriptor(descriptors.programmaticallyDragging, env, dnd, tree)),
-            React.createElement(LiveWrapper, { live: "assertive" }, resolveLiveDescriptor_1.resolveLiveDescriptor(descriptors.programmaticallyDraggingTarget, env, dnd, tree))));
+            React.createElement(LiveWrapper, { live: "polite" }, resolveLiveDescriptor_1.resolveLiveDescriptor(descriptors.programmaticallyDragging, env, dnd, tree, keys)),
+            React.createElement(LiveWrapper, { live: "assertive" }, resolveLiveDescriptor_1.resolveLiveDescriptor(descriptors.programmaticallyDraggingTarget, env, dnd, tree, keys))));
     }
     else {
         return (React.createElement(MainWrapper, { tree: tree },
-            React.createElement(LiveWrapper, { live: "off" }, resolveLiveDescriptor_1.resolveLiveDescriptor(descriptors.introduction, env, dnd, tree))));
+            React.createElement(LiveWrapper, { live: "off" }, resolveLiveDescriptor_1.resolveLiveDescriptor(descriptors.introduction, env, dnd, tree, keys))));
     }
 };
 exports.LiveDescription = LiveDescription;

lib/cjs/tree/resolveLiveDescriptor.d.ts

@@ -1,2 +0,2 @@
-import { DragAndDropContextProps, TreeContextProps, TreeEnvironmentContextProps } from '../types';
-export declare const resolveLiveDescriptor: (descriptor: string, environment: TreeEnvironmentContextProps, dnd: DragAndDropContextProps, tree: TreeContextProps) => string;
+import { DragAndDropContextProps, KeyboardBindings, TreeContextProps, TreeEnvironmentContextProps } from '../types';
+export declare const resolveLiveDescriptor: (descriptor: string, environment: TreeEnvironmentContextProps, dnd: DragAndDropContextProps, tree: TreeContextProps, keyboardBindings: Required<KeyboardBindings>) => string;

lib/cjs/tree/resolveLiveDescriptor.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.resolveLiveDescriptor = void 0;
-var defaultKeyboardBindings_1 = require("../hotkeys/defaultKeyboardBindings");
-var resolveLiveDescriptor = function (descriptor, environment, dnd, tree) {
+var resolveLiveDescriptor = function (descriptor, environment, dnd, tree, keyboardBindings) {
     var getItemTitle = function (index) { return environment.getItemTitle(environment.items[index]); };
     return descriptor.replace(/(\{[^\s\}]+)\}/g, function (variableNameWithBrackets) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         var variableName = variableNameWithBrackets.slice(1, -1);
@@ -14,3 +13,3 @@ switch (variableName) {
             case 'renamingItem':
-                return !!tree.renamingItem ? getItemTitle(tree.renamingItem) : 'None';
+                return tree.renamingItem ? getItemTitle(tree.renamingItem) : 'None';
             case 'dragItems':
@@ -37,3 +36,3 @@ return (_c = (_b = dnd.draggingItems) === null || _b === void 0 ? void 0 : _b.map(function (item) { return environment.getItemTitle(item); }).join(', ')) !== null && _c !== void 0 ? _c : 'None';
                 if (variableName.startsWith('keybinding:')) {
-                    return ((_d = environment.keyboardBindings) !== null && _d !== void 0 ? _d : defaultKeyboardBindings_1.defaultKeyboardBindings)[variableName.slice(11)][0];
+                    return keyboardBindings[variableName.slice(11)][0];
                 }
@@ -40,0 +39,0 @@ else {

lib/cjs/treeItem/TreeItemRenamingInput.js

@@ -12,5 +12,8 @@ "use strict";
     var inputRef = react_1.useRef(null);
+    var submitButtonRef = react_1.useRef(null);
     var item = environment.items[props.itemIndex];
     var _b = react_1.useState(environment.getItemTitle(item)), title = _b[0], setTitle = _b[1];
     var abort = function () {
+        var _a;
+        (_a = environment.onAbortRenamingItem) === null || _a === void 0 ? void 0 : _a.call(environment, item, treeInformation.treeId);
         setRenamingItem(null);
@@ -45,4 +48,6 @@ requestAnimationFrame(function () {
         },
-        onBlur: function () {
-            abort();
+        onBlur: function (e) {
+            if (e.relatedTarget !== submitButtonRef.current) {
+                abort();
+            }
         },
@@ -68,2 +73,3 @@ 'aria-label': 'New item name',
         submitButtonProps: submitButtonProps,
+        submitButtonRef: submitButtonRef,
         formProps: formProps,
@@ -70,0 +76,0 @@ inputProps: inputProps,

lib/cjs/treeItem/useTreeItemRenderContext.js

@@ -49,3 +49,3 @@ "use strict";
         var viewState = environment.viewState[treeId];
-        var currentlySelectedItems = (_d = (_c = viewState === null || viewState === void 0 ? void 0 : viewState.selectedItems) === null || _c === void 0 ? void 0 : _c.map(function (item) { return environment.items[item]; })) !== null && _d !== void 0 ? _d : ((viewState === null || viewState === void 0 ? void 0 : viewState.focusedItem) ? [environment.items[viewState === null || viewState === void 0 ? void 0 : viewState.focusedItem]] : []);
+        var currentlySelectedItems = ((_d = (_c = viewState === null || viewState === void 0 ? void 0 : viewState.selectedItems) === null || _c === void 0 ? void 0 : _c.map(function (item) { return environment.items[item]; })) !== null && _d !== void 0 ? _d : ((viewState === null || viewState === void 0 ? void 0 : viewState.focusedItem) ? [environment.items[viewState === null || viewState === void 0 ? void 0 : viewState.focusedItem]] : [])).filter(function (item) { return !!item; });
         var isItemPartOfSelectedItems = !!currentlySelectedItems.find(function (selectedItem) { return selectedItem.index === item.index; });
@@ -52,0 +52,0 @@ var canDragCurrentlySelectedItems = currentlySelectedItems &&

lib/cjs/types.d.ts

@@ -83,2 +83,3 @@ import React, { FormHTMLAttributes, HTMLProps, InputHTMLAttributes, Ref } from 'react';
         submitButtonProps: HTMLProps<any>;
+        submitButtonRef: Ref<any>;
         formProps: FormHTMLAttributes<HTMLFormElement>;
@@ -123,2 +124,3 @@ }) => React.ReactElement | null;
     mode: InteractionMode | string;
+    extends?: InteractionMode;
     createInteractiveElementProps: (item: TreeItem, treeId: string, actions: TreeItemActions, renderFlags: TreeItemRenderFlags) => HTMLProps<HTMLElement>;
@@ -125,0 +127,0 @@ }

lib/esm/controlledEnvironment/InteractionManagerProvider.js

 import * as React from 'react';
+import { useMemo } from 'react';
 import { InteractionMode } from '../types';
-import { useMemo } from 'react';
-import { ClickItemToExpandInteractionManager } from '../interactionMode/ClickItemToExpandInteractionManager';
 import { useTreeEnvironment } from './ControlledTreeEnvironment';
-import { DoubleClickItemToExpandInteractionManager } from '../interactionMode/DoubleClickItemToExpandInteractionManager';
-import { ClickArrowToExpandInteractionManager } from '../interactionMode/ClickArrowToExpandInteractionManager';
+import { mergeInteractionManagers } from './mergeInteractionManagers';
+import { buildInteractionMode } from './buildInteractionMode';
 var InteractionManagerContext = React.createContext(null);
@@ -12,19 +11,16 @@ export var useInteractionManager = function () { return React.useContext(InteractionManagerContext); };
     var environment = useTreeEnvironment();
+    var defaultInteractionMode = environment.defaultInteractionMode;
     var interactionManager = useMemo(function () {
         var _a;
-        if (environment.defaultInteractionMode && typeof environment.defaultInteractionMode !== 'string') {
-            return environment.defaultInteractionMode;
+        if (defaultInteractionMode && typeof defaultInteractionMode !== 'string') {
+            if (defaultInteractionMode.extends) {
+                return mergeInteractionManagers(defaultInteractionMode, buildInteractionMode(defaultInteractionMode.extends, environment));
+            }
+            else {
+                return defaultInteractionMode;
+            }
         }
-        switch ((_a = environment.defaultInteractionMode) !== null && _a !== void 0 ? _a : InteractionMode.ClickItemToExpand) {
-            case InteractionMode.DoubleClickItemToExpand:
-                return new DoubleClickItemToExpandInteractionManager(environment);
-            case InteractionMode.ClickItemToExpand:
-                return new ClickItemToExpandInteractionManager(environment);
-            case InteractionMode.ClickArrowToExpand:
-                return new ClickArrowToExpandInteractionManager(environment);
-            default:
-                throw Error("Unknown interaction mode " + environment.defaultInteractionMode);
-        }
+        return buildInteractionMode((_a = defaultInteractionMode) !== null && _a !== void 0 ? _a : InteractionMode.ClickItemToExpand, environment);
     }, []); // TODO make sure that environment does not need to be refreshed
     return (React.createElement(InteractionManagerContext.Provider, { value: interactionManager }, props.children));
 };

lib/esm/hotkeys/useHotkey.js

@@ -8,4 +8,4 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
 import { useMemo, useRef } from 'react';
-import { defaultKeyboardBindings } from './defaultKeyboardBindings';
 import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
+import { useKeyboardBindings } from './useKeyboardBindings';
 var elementsThatCanTakeText = ['input', 'textarea'];
@@ -16,8 +16,4 @@ export var useHotkey = function (combinationName, onHit, active, activatableWhileFocusingInput, deps) {
     var pressedKeys = useRef([]);
-    var possibleCombinations = useMemo(function () {
-        var _a, _b;
-        return ((_b = (_a = environment.keyboardBindings) === null || _a === void 0 ? void 0 : _a[combinationName]) !== null && _b !== void 0 ? _b : defaultKeyboardBindings[combinationName]).map(function (combination) {
-            return combination.split('+');
-        });
-    }, [combinationName, environment.keyboardBindings]);
+    var keyboardBindings = useKeyboardBindings();
+    var possibleCombinations = useMemo(function () { return keyboardBindings[combinationName].map(function (combination) { return combination.split('+'); }); }, [combinationName, environment.keyboardBindings]);
     useHtmlElementEventListener(document, 'keydown', function (e) {
@@ -24,0 +20,0 @@ if (active === false) {

lib/esm/renderers/createDefaultRenderers.js

@@ -55,6 +55,6 @@ var __assign = (this && this.__assign) || function () {
         }, renderRenameInput: function (_a) {
-            var inputProps = _a.inputProps, inputRef = _a.inputRef, submitButtonProps = _a.submitButtonProps, formProps = _a.formProps;
+            var inputProps = _a.inputProps, inputRef = _a.inputRef, submitButtonProps = _a.submitButtonProps, submitButtonRef = _a.submitButtonRef, formProps = _a.formProps;
             return (React.createElement("form", __assign({}, formProps, { className: "rct-tree-item-renaming-form" }),
                 React.createElement("input", __assign({}, inputProps, { ref: inputRef, className: "rct-tree-item-renaming-input" })),
-                React.createElement("input", __assign({}, submitButtonProps, { type: "submit", className: "rct-tree-item-renaming-submit-button", value: "\uD83D\uDDF8" }))));
+                React.createElement("input", __assign({}, submitButtonProps, { ref: submitButtonRef, type: "submit", className: "rct-tree-item-renaming-submit-button", value: "\uD83D\uDDF8" }))));
         }, renderDraggingItem: function () {
@@ -61,0 +61,0 @@ return React.createElement("div", null);

lib/esm/tree/LiveDescription.d.ts

 import * as React from 'react';
-export declare const LiveDescription: React.FC<{}>;
+export declare const LiveDescription: React.FC;

lib/esm/tree/LiveDescription.js

@@ -8,3 +8,4 @@ import * as React from 'react';
 import { resolveLiveDescriptor } from './resolveLiveDescriptor';
-export var LiveDescription = function (props) {
+import { useKeyboardBindings } from '../hotkeys/useKeyboardBindings';
+export var LiveDescription = function () {
     var _a;
@@ -14,2 +15,3 @@ var env = useTreeEnvironment();
     var dnd = useDragAndDrop();
+    var keys = useKeyboardBindings();
     if (!((_a = env.showLiveDescription) !== null && _a !== void 0 ? _a : true)) {
@@ -28,17 +30,17 @@ return null;
         return (React.createElement(MainWrapper, { tree: tree },
-            React.createElement(LiveWrapper, { live: "polite" }, resolveLiveDescriptor(descriptors.renamingItem, env, dnd, tree))));
+            React.createElement(LiveWrapper, { live: "polite" }, resolveLiveDescriptor(descriptors.renamingItem, env, dnd, tree, keys))));
     }
     else if (tree.treeInformation.isSearching) {
         return (React.createElement(MainWrapper, { tree: tree },
-            React.createElement(LiveWrapper, { live: "polite" }, resolveLiveDescriptor(descriptors.searching, env, dnd, tree))));
+            React.createElement(LiveWrapper, { live: "polite" }, resolveLiveDescriptor(descriptors.searching, env, dnd, tree, keys))));
     }
     else if (tree.treeInformation.isProgrammaticallyDragging) {
         return (React.createElement(MainWrapper, { tree: tree },
-            React.createElement(LiveWrapper, { live: "polite" }, resolveLiveDescriptor(descriptors.programmaticallyDragging, env, dnd, tree)),
-            React.createElement(LiveWrapper, { live: "assertive" }, resolveLiveDescriptor(descriptors.programmaticallyDraggingTarget, env, dnd, tree))));
+            React.createElement(LiveWrapper, { live: "polite" }, resolveLiveDescriptor(descriptors.programmaticallyDragging, env, dnd, tree, keys)),
+            React.createElement(LiveWrapper, { live: "assertive" }, resolveLiveDescriptor(descriptors.programmaticallyDraggingTarget, env, dnd, tree, keys))));
     }
     else {
         return (React.createElement(MainWrapper, { tree: tree },
-            React.createElement(LiveWrapper, { live: "off" }, resolveLiveDescriptor(descriptors.introduction, env, dnd, tree))));
+            React.createElement(LiveWrapper, { live: "off" }, resolveLiveDescriptor(descriptors.introduction, env, dnd, tree, keys))));
     }
 };

lib/esm/tree/resolveLiveDescriptor.d.ts

@@ -1,2 +0,2 @@
-import { DragAndDropContextProps, TreeContextProps, TreeEnvironmentContextProps } from '../types';
-export declare const resolveLiveDescriptor: (descriptor: string, environment: TreeEnvironmentContextProps, dnd: DragAndDropContextProps, tree: TreeContextProps) => string;
+import { DragAndDropContextProps, KeyboardBindings, TreeContextProps, TreeEnvironmentContextProps } from '../types';
+export declare const resolveLiveDescriptor: (descriptor: string, environment: TreeEnvironmentContextProps, dnd: DragAndDropContextProps, tree: TreeContextProps, keyboardBindings: Required<KeyboardBindings>) => string;

lib/esm/tree/resolveLiveDescriptor.js

@@ -1,6 +0,5 @@
-import { defaultKeyboardBindings } from '../hotkeys/defaultKeyboardBindings';
-export var resolveLiveDescriptor = function (descriptor, environment, dnd, tree) {
+export var resolveLiveDescriptor = function (descriptor, environment, dnd, tree, keyboardBindings) {
     var getItemTitle = function (index) { return environment.getItemTitle(environment.items[index]); };
     return descriptor.replace(/(\{[^\s\}]+)\}/g, function (variableNameWithBrackets) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         var variableName = variableNameWithBrackets.slice(1, -1);
@@ -11,3 +10,3 @@ switch (variableName) {
             case 'renamingItem':
-                return !!tree.renamingItem ? getItemTitle(tree.renamingItem) : 'None';
+                return tree.renamingItem ? getItemTitle(tree.renamingItem) : 'None';
             case 'dragItems':
@@ -34,3 +33,3 @@ return (_c = (_b = dnd.draggingItems) === null || _b === void 0 ? void 0 : _b.map(function (item) { return environment.getItemTitle(item); }).join(', ')) !== null && _c !== void 0 ? _c : 'None';
                 if (variableName.startsWith('keybinding:')) {
-                    return ((_d = environment.keyboardBindings) !== null && _d !== void 0 ? _d : defaultKeyboardBindings)[variableName.slice(11)][0];
+                    return keyboardBindings[variableName.slice(11)][0];
                 }
@@ -37,0 +36,0 @@ else {

lib/esm/treeItem/TreeItemRenamingInput.js

@@ -9,5 +9,8 @@ import { useTree } from '../tree/Tree';
     var inputRef = useRef(null);
+    var submitButtonRef = useRef(null);
     var item = environment.items[props.itemIndex];
     var _b = useState(environment.getItemTitle(item)), title = _b[0], setTitle = _b[1];
     var abort = function () {
+        var _a;
+        (_a = environment.onAbortRenamingItem) === null || _a === void 0 ? void 0 : _a.call(environment, item, treeInformation.treeId);
         setRenamingItem(null);
@@ -42,4 +45,6 @@ requestAnimationFrame(function () {
         },
-        onBlur: function () {
-            abort();
+        onBlur: function (e) {
+            if (e.relatedTarget !== submitButtonRef.current) {
+                abort();
+            }
         },
@@ -65,2 +70,3 @@ 'aria-label': 'New item name',
         submitButtonProps: submitButtonProps,
+        submitButtonRef: submitButtonRef,
         formProps: formProps,
@@ -67,0 +73,0 @@ inputProps: inputProps,

lib/esm/treeItem/useTreeItemRenderContext.js

@@ -46,3 +46,3 @@ var __assign = (this && this.__assign) || function () {
         var viewState = environment.viewState[treeId];
-        var currentlySelectedItems = (_d = (_c = viewState === null || viewState === void 0 ? void 0 : viewState.selectedItems) === null || _c === void 0 ? void 0 : _c.map(function (item) { return environment.items[item]; })) !== null && _d !== void 0 ? _d : ((viewState === null || viewState === void 0 ? void 0 : viewState.focusedItem) ? [environment.items[viewState === null || viewState === void 0 ? void 0 : viewState.focusedItem]] : []);
+        var currentlySelectedItems = ((_d = (_c = viewState === null || viewState === void 0 ? void 0 : viewState.selectedItems) === null || _c === void 0 ? void 0 : _c.map(function (item) { return environment.items[item]; })) !== null && _d !== void 0 ? _d : ((viewState === null || viewState === void 0 ? void 0 : viewState.focusedItem) ? [environment.items[viewState === null || viewState === void 0 ? void 0 : viewState.focusedItem]] : [])).filter(function (item) { return !!item; });
         var isItemPartOfSelectedItems = !!currentlySelectedItems.find(function (selectedItem) { return selectedItem.index === item.index; });
@@ -49,0 +49,0 @@ var canDragCurrentlySelectedItems = currentlySelectedItems &&

lib/esm/types.d.ts

@@ -83,2 +83,3 @@ import React, { FormHTMLAttributes, HTMLProps, InputHTMLAttributes, Ref } from 'react';
         submitButtonProps: HTMLProps<any>;
+        submitButtonRef: Ref<any>;
         formProps: FormHTMLAttributes<HTMLFormElement>;
@@ -123,2 +124,3 @@ }) => React.ReactElement | null;
     mode: InteractionMode | string;
+    extends?: InteractionMode;
     createInteractiveElementProps: (item: TreeItem, treeId: string, actions: TreeItemActions, renderFlags: TreeItemRenderFlags) => HTMLProps<HTMLElement>;
@@ -125,0 +127,0 @@ }

lib/esnext/controlledEnvironment/InteractionManagerProvider.js

 import * as React from 'react';
+import { useMemo } from 'react';
 import { InteractionMode } from '../types';
-import { useMemo } from 'react';
-import { ClickItemToExpandInteractionManager } from '../interactionMode/ClickItemToExpandInteractionManager';
 import { useTreeEnvironment } from './ControlledTreeEnvironment';
-import { DoubleClickItemToExpandInteractionManager } from '../interactionMode/DoubleClickItemToExpandInteractionManager';
-import { ClickArrowToExpandInteractionManager } from '../interactionMode/ClickArrowToExpandInteractionManager';
+import { mergeInteractionManagers } from './mergeInteractionManagers';
+import { buildInteractionMode } from './buildInteractionMode';
 var InteractionManagerContext = React.createContext(null);
@@ -12,19 +11,16 @@ export var useInteractionManager = function () { return React.useContext(InteractionManagerContext); };
     var environment = useTreeEnvironment();
+    var defaultInteractionMode = environment.defaultInteractionMode;
     var interactionManager = useMemo(function () {
         var _a;
-        if (environment.defaultInteractionMode && typeof environment.defaultInteractionMode !== 'string') {
-            return environment.defaultInteractionMode;
+        if (defaultInteractionMode && typeof defaultInteractionMode !== 'string') {
+            if (defaultInteractionMode.extends) {
+                return mergeInteractionManagers(defaultInteractionMode, buildInteractionMode(defaultInteractionMode.extends, environment));
+            }
+            else {
+                return defaultInteractionMode;
+            }
         }
-        switch ((_a = environment.defaultInteractionMode) !== null && _a !== void 0 ? _a : InteractionMode.ClickItemToExpand) {
-            case InteractionMode.DoubleClickItemToExpand:
-                return new DoubleClickItemToExpandInteractionManager(environment);
-            case InteractionMode.ClickItemToExpand:
-                return new ClickItemToExpandInteractionManager(environment);
-            case InteractionMode.ClickArrowToExpand:
-                return new ClickArrowToExpandInteractionManager(environment);
-            default:
-                throw Error("Unknown interaction mode " + environment.defaultInteractionMode);
-        }
+        return buildInteractionMode((_a = defaultInteractionMode) !== null && _a !== void 0 ? _a : InteractionMode.ClickItemToExpand, environment);
     }, []); // TODO make sure that environment does not need to be refreshed
     return (React.createElement(InteractionManagerContext.Provider, { value: interactionManager }, props.children));
 };

lib/esnext/hotkeys/useHotkey.js

@@ -8,4 +8,4 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
 import { useMemo, useRef } from 'react';
-import { defaultKeyboardBindings } from './defaultKeyboardBindings';
 import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
+import { useKeyboardBindings } from './useKeyboardBindings';
 var elementsThatCanTakeText = ['input', 'textarea'];
@@ -16,8 +16,4 @@ export var useHotkey = function (combinationName, onHit, active, activatableWhileFocusingInput, deps) {
     var pressedKeys = useRef([]);
-    var possibleCombinations = useMemo(function () {
-        var _a, _b;
-        return ((_b = (_a = environment.keyboardBindings) === null || _a === void 0 ? void 0 : _a[combinationName]) !== null && _b !== void 0 ? _b : defaultKeyboardBindings[combinationName]).map(function (combination) {
-            return combination.split('+');
-        });
-    }, [combinationName, environment.keyboardBindings]);
+    var keyboardBindings = useKeyboardBindings();
+    var possibleCombinations = useMemo(function () { return keyboardBindings[combinationName].map(function (combination) { return combination.split('+'); }); }, [combinationName, environment.keyboardBindings]);
     useHtmlElementEventListener(document, 'keydown', function (e) {
@@ -24,0 +20,0 @@ if (active === false) {

lib/esnext/renderers/createDefaultRenderers.js

@@ -55,6 +55,6 @@ var __assign = (this && this.__assign) || function () {
         }, renderRenameInput: function (_a) {
-            var inputProps = _a.inputProps, inputRef = _a.inputRef, submitButtonProps = _a.submitButtonProps, formProps = _a.formProps;
+            var inputProps = _a.inputProps, inputRef = _a.inputRef, submitButtonProps = _a.submitButtonProps, submitButtonRef = _a.submitButtonRef, formProps = _a.formProps;
             return (React.createElement("form", __assign({}, formProps, { className: "rct-tree-item-renaming-form" }),
                 React.createElement("input", __assign({}, inputProps, { ref: inputRef, className: "rct-tree-item-renaming-input" })),
-                React.createElement("input", __assign({}, submitButtonProps, { type: "submit", className: "rct-tree-item-renaming-submit-button", value: "\uD83D\uDDF8" }))));
+                React.createElement("input", __assign({}, submitButtonProps, { ref: submitButtonRef, type: "submit", className: "rct-tree-item-renaming-submit-button", value: "\uD83D\uDDF8" }))));
         }, renderDraggingItem: function () {
@@ -61,0 +61,0 @@ return React.createElement("div", null);

lib/esnext/tree/LiveDescription.d.ts

 import * as React from 'react';
-export declare const LiveDescription: React.FC<{}>;
+export declare const LiveDescription: React.FC;

lib/esnext/tree/LiveDescription.js

@@ -8,3 +8,4 @@ import * as React from 'react';
 import { resolveLiveDescriptor } from './resolveLiveDescriptor';
-export var LiveDescription = function (props) {
+import { useKeyboardBindings } from '../hotkeys/useKeyboardBindings';
+export var LiveDescription = function () {
     var _a;
@@ -14,2 +15,3 @@ var env = useTreeEnvironment();
     var dnd = useDragAndDrop();
+    var keys = useKeyboardBindings();
     if (!((_a = env.showLiveDescription) !== null && _a !== void 0 ? _a : true)) {
@@ -28,17 +30,17 @@ return null;
         return (React.createElement(MainWrapper, { tree: tree },
-            React.createElement(LiveWrapper, { live: "polite" }, resolveLiveDescriptor(descriptors.renamingItem, env, dnd, tree))));
+            React.createElement(LiveWrapper, { live: "polite" }, resolveLiveDescriptor(descriptors.renamingItem, env, dnd, tree, keys))));
     }
     else if (tree.treeInformation.isSearching) {
         return (React.createElement(MainWrapper, { tree: tree },
-            React.createElement(LiveWrapper, { live: "polite" }, resolveLiveDescriptor(descriptors.searching, env, dnd, tree))));
+            React.createElement(LiveWrapper, { live: "polite" }, resolveLiveDescriptor(descriptors.searching, env, dnd, tree, keys))));
     }
     else if (tree.treeInformation.isProgrammaticallyDragging) {
         return (React.createElement(MainWrapper, { tree: tree },
-            React.createElement(LiveWrapper, { live: "polite" }, resolveLiveDescriptor(descriptors.programmaticallyDragging, env, dnd, tree)),
-            React.createElement(LiveWrapper, { live: "assertive" }, resolveLiveDescriptor(descriptors.programmaticallyDraggingTarget, env, dnd, tree))));
+            React.createElement(LiveWrapper, { live: "polite" }, resolveLiveDescriptor(descriptors.programmaticallyDragging, env, dnd, tree, keys)),
+            React.createElement(LiveWrapper, { live: "assertive" }, resolveLiveDescriptor(descriptors.programmaticallyDraggingTarget, env, dnd, tree, keys))));
     }
     else {
         return (React.createElement(MainWrapper, { tree: tree },
-            React.createElement(LiveWrapper, { live: "off" }, resolveLiveDescriptor(descriptors.introduction, env, dnd, tree))));
+            React.createElement(LiveWrapper, { live: "off" }, resolveLiveDescriptor(descriptors.introduction, env, dnd, tree, keys))));
     }
 };

lib/esnext/tree/resolveLiveDescriptor.d.ts

@@ -1,2 +0,2 @@
-import { DragAndDropContextProps, TreeContextProps, TreeEnvironmentContextProps } from '../types';
-export declare const resolveLiveDescriptor: (descriptor: string, environment: TreeEnvironmentContextProps, dnd: DragAndDropContextProps, tree: TreeContextProps) => string;
+import { DragAndDropContextProps, KeyboardBindings, TreeContextProps, TreeEnvironmentContextProps } from '../types';
+export declare const resolveLiveDescriptor: (descriptor: string, environment: TreeEnvironmentContextProps, dnd: DragAndDropContextProps, tree: TreeContextProps, keyboardBindings: Required<KeyboardBindings>) => string;

lib/esnext/tree/resolveLiveDescriptor.js

@@ -1,6 +0,5 @@
-import { defaultKeyboardBindings } from '../hotkeys/defaultKeyboardBindings';
-export var resolveLiveDescriptor = function (descriptor, environment, dnd, tree) {
+export var resolveLiveDescriptor = function (descriptor, environment, dnd, tree, keyboardBindings) {
     var getItemTitle = function (index) { return environment.getItemTitle(environment.items[index]); };
     return descriptor.replace(/(\{[^\s\}]+)\}/g, function (variableNameWithBrackets) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         var variableName = variableNameWithBrackets.slice(1, -1);
@@ -11,3 +10,3 @@ switch (variableName) {
             case 'renamingItem':
-                return !!tree.renamingItem ? getItemTitle(tree.renamingItem) : 'None';
+                return tree.renamingItem ? getItemTitle(tree.renamingItem) : 'None';
             case 'dragItems':
@@ -34,3 +33,3 @@ return (_c = (_b = dnd.draggingItems) === null || _b === void 0 ? void 0 : _b.map(function (item) { return environment.getItemTitle(item); }).join(', ')) !== null && _c !== void 0 ? _c : 'None';
                 if (variableName.startsWith('keybinding:')) {
-                    return ((_d = environment.keyboardBindings) !== null && _d !== void 0 ? _d : defaultKeyboardBindings)[variableName.slice(11)][0];
+                    return keyboardBindings[variableName.slice(11)][0];
                 }
@@ -37,0 +36,0 @@ else {

lib/esnext/treeItem/TreeItemRenamingInput.js

@@ -9,5 +9,8 @@ import { useTree } from '../tree/Tree';
     var inputRef = useRef(null);
+    var submitButtonRef = useRef(null);
     var item = environment.items[props.itemIndex];
     var _b = useState(environment.getItemTitle(item)), title = _b[0], setTitle = _b[1];
     var abort = function () {
+        var _a;
+        (_a = environment.onAbortRenamingItem) === null || _a === void 0 ? void 0 : _a.call(environment, item, treeInformation.treeId);
         setRenamingItem(null);
@@ -42,4 +45,6 @@ requestAnimationFrame(function () {
         },
-        onBlur: function () {
-            abort();
+        onBlur: function (e) {
+            if (e.relatedTarget !== submitButtonRef.current) {
+                abort();
+            }
         },
@@ -65,2 +70,3 @@ 'aria-label': 'New item name',
         submitButtonProps: submitButtonProps,
+        submitButtonRef: submitButtonRef,
         formProps: formProps,
@@ -67,0 +73,0 @@ inputProps: inputProps,

lib/esnext/treeItem/useTreeItemRenderContext.js

@@ -46,3 +46,3 @@ var __assign = (this && this.__assign) || function () {
         var viewState = environment.viewState[treeId];
-        var currentlySelectedItems = (_d = (_c = viewState === null || viewState === void 0 ? void 0 : viewState.selectedItems) === null || _c === void 0 ? void 0 : _c.map(function (item) { return environment.items[item]; })) !== null && _d !== void 0 ? _d : ((viewState === null || viewState === void 0 ? void 0 : viewState.focusedItem) ? [environment.items[viewState === null || viewState === void 0 ? void 0 : viewState.focusedItem]] : []);
+        var currentlySelectedItems = ((_d = (_c = viewState === null || viewState === void 0 ? void 0 : viewState.selectedItems) === null || _c === void 0 ? void 0 : _c.map(function (item) { return environment.items[item]; })) !== null && _d !== void 0 ? _d : ((viewState === null || viewState === void 0 ? void 0 : viewState.focusedItem) ? [environment.items[viewState === null || viewState === void 0 ? void 0 : viewState.focusedItem]] : [])).filter(function (item) { return !!item; });
         var isItemPartOfSelectedItems = !!currentlySelectedItems.find(function (selectedItem) { return selectedItem.index === item.index; });
@@ -49,0 +49,0 @@ var canDragCurrentlySelectedItems = currentlySelectedItems &&

lib/esnext/types.d.ts

@@ -83,2 +83,3 @@ import React, { FormHTMLAttributes, HTMLProps, InputHTMLAttributes, Ref } from 'react';
         submitButtonProps: HTMLProps<any>;
+        submitButtonRef: Ref<any>;
         formProps: FormHTMLAttributes<HTMLFormElement>;
@@ -123,2 +124,3 @@ }) => React.ReactElement | null;
     mode: InteractionMode | string;
+    extends?: InteractionMode;
     createInteractiveElementProps: (item: TreeItem, treeId: string, actions: TreeItemActions, renderFlags: TreeItemRenderFlags) => HTMLProps<HTMLElement>;
@@ -125,0 +127,0 @@ }

package.json

 {
   "name": "react-complex-tree",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "main": "lib/cjs/index.js",
@@ -61,3 +61,3 @@ "module": "lib/esm/index.js",
   },
-  "gitHead": "c0abd6546aa2f6496ec79b49ddd10c5a572db508"
+  "gitHead": "ab53f8e788237e42a460ded68162907cc7324b55"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

930126

increased by1.99%

Number of package files

324

increased by5.88%

Lines of code

11264

increased by1.93%

No dependency changes