react-complex-tree - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

lib/hotkeys/useHotkey.d.ts

 import { KeyboardBindings } from '../types';
-export declare const useHotkey: (combinationName: keyof KeyboardBindings, onHit: (e: KeyboardEvent) => void, active?: boolean | undefined, deps?: any[] | undefined) => void;
+export declare const useHotkey: (combinationName: keyof KeyboardBindings, onHit: (e: KeyboardEvent) => void, active?: boolean | undefined, activatableWhileFocusingInput?: boolean, deps?: any[] | undefined) => void;

lib/hotkeys/useHotkey.js

@@ -13,3 +13,5 @@ "use strict";
 var ControlledTreeEnvironment_1 = require("../controlledEnvironment/ControlledTreeEnvironment");
-var useHotkey = function (combinationName, onHit, active, deps) {
+var elementsThatCanTakeText = ['input', 'textarea'];
+var useHotkey = function (combinationName, onHit, active, activatableWhileFocusingInput, deps) {
+    if (activatableWhileFocusingInput === void 0) { activatableWhileFocusingInput = false; }
     var environment = ControlledTreeEnvironment_1.useTreeEnvironment();
@@ -27,2 +29,8 @@ var pressedKeys = react_1.useRef([]);
         }
+        if ((elementsThatCanTakeText.includes(e.target.tagName.toLowerCase()) ||
+            e.target.isContentEditable) &&
+            !activatableWhileFocusingInput) {
+            // Skip if an input is selected
+            return;
+        }
         if (!pressedKeys.current.includes(e.key)) {
@@ -37,3 +45,6 @@ pressedKeys.current.push(e.key);
             if (partialMatch) {
-                e.preventDefault();
+                if (pressedKeys.current.length > 1 || !/^[a-zA-Z]$/.test(e.key)) {
+                    // Prevent default, but not if this is the first input and a letter (which should trigger a search)
+                    e.preventDefault();
+                }
             }
@@ -40,0 +51,0 @@ }

lib/index.d.ts

@@ -6,1 +6,2 @@ export * from './controlledEnvironment/ControlledTreeEnvironment';
 export * from './types';
+export * from './renderers';

lib/index.js

@@ -18,1 +18,2 @@ "use strict";
 __exportStar(require("./types"), exports);
+__exportStar(require("./renderers"), exports);

lib/renderers/createDefaultRenderers.js

@@ -46,6 +46,6 @@ "use strict";
                         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\r\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\r\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("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("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\r\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\r\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" }))))))));
+                            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" }))))))));
         }, renderItem: function (_a) {
@@ -52,0 +52,0 @@ var _b;

lib/search/SearchInput.js

@@ -46,3 +46,3 @@ "use strict";
         });
-    }, isActiveTree && search !== null, [search, isActiveTree]);
+    }, isActiveTree && search !== null, true, [search, isActiveTree]);
     useHtmlElementEventListener_1.useHtmlElementEventListener(props.containerRef, 'keydown', function (e) {
@@ -49,0 +49,0 @@ var _a, _b, _c, _d;

lib/tree/useTreeKeyboardBindings.js

@@ -19,4 +19,5 @@ "use strict";
 var useTreeKeyboardBindings = function () {
+    var _a;
     var environment = ControlledTreeEnvironment_1.useTreeEnvironment();
-    var _a = Tree_1.useTree(), treeId = _a.treeId, setRenamingItem = _a.setRenamingItem, setSearch = _a.setSearch;
+    var _b = Tree_1.useTree(), treeId = _b.treeId, setRenamingItem = _b.setRenamingItem, setSearch = _b.setSearch;
     var dnd = DragAndDropProvider_1.useDragAndDrop();
@@ -130,3 +131,3 @@ var viewState = useViewState_1.useViewState();
         }
-    }, isActiveTree);
+    }, isActiveTree && ((_a = environment.canRename) !== null && _a !== void 0 ? _a : true));
     useHotkey_1.useHotkey('startSearch', function (e) {
@@ -133,0 +134,0 @@ var _a, _b;

lib/treeItem/TreeItemRenamingInput.js

@@ -38,3 +38,3 @@ "use strict";
         abort();
-    });
+    }, true, true);
     var inputProps = {
@@ -41,0 +41,0 @@ value: title,

lib/types.d.ts

@@ -130,2 +130,3 @@ import React, { FormHTMLAttributes, HTMLProps, InputHTMLAttributes, Ref } from 'react';
     canSearchByStartingTyping?: boolean;
+    canRename?: boolean;
     autoFocus?: boolean;
@@ -132,0 +133,0 @@ doesSearchMatchItem?: (search: string, item: TreeItem<T>, itemTitle: string) => boolean;

package.json

 {
   "name": "react-complex-tree",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "main": "lib/index.js",
@@ -42,3 +42,3 @@ "repository": {
   },
-  "gitHead": "6286b35323411babe8bc8b05ba926b3df30ae48f"
+  "gitHead": "f49a8d8f2ebc7ebe0cb97b45c000821c635a298a"
 }

readme.md

@@ -7,2 +7,4 @@ # React Complex Tree
 
+<a href="https://www.producthunt.com/posts/react-complex-tree?utm_source=badge-review&utm_medium=badge&utm_souce=badge-react-complex-tree#discussion-body" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/review.svg?post_id=303494&theme=light" alt="React Complex Tree - Unopinionated Accessible Tree Component with Drag and Drop | Product Hunt" width="250" height="54" /></a>
+
 Look into the [official documentation](https://rct.lukasbach.com/) to see more examples
@@ -9,0 +11,0 @@ and a more comprehensive documentation.

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

200508

increased by0.88%

Number of package files

97

increased by2.11%

Lines of code

3771

increased by0.77%

Number of lines in readme file

81

increased by2.53%

No dependency changes