react-arborist 3.4.0 → 3.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/README.md +16 -0
  2. package/dist/main/components/cursor.js +1 -2
  3. package/dist/main/components/default-container.js +1 -2
  4. package/dist/main/components/default-drag-preview.js +1 -2
  5. package/dist/main/components/default-node.js +1 -2
  6. package/dist/main/components/default-row.js +1 -2
  7. package/dist/main/components/drag-preview-container.js +1 -2
  8. package/dist/main/components/list-outer-element.d.ts +0 -1
  9. package/dist/main/components/outer-drop.js +1 -2
  10. package/dist/main/components/provider.js +1 -2
  11. package/dist/main/components/tree-container.js +1 -2
  12. package/dist/main/components/tree.d.ts +1 -2
  13. package/dist/main/context.js +5 -5
  14. package/dist/main/data/create-list.js +1 -2
  15. package/dist/main/data/create-root.js +2 -2
  16. package/dist/main/data/make-tree.js +1 -2
  17. package/dist/main/dnd/compute-drop.js +1 -2
  18. package/dist/main/dnd/drag-hook.js +2 -3
  19. package/dist/main/dnd/drop-hook.js +1 -2
  20. package/dist/main/dnd/measure-hover.js +1 -2
  21. package/dist/main/dnd/outer-drop-hook.js +1 -2
  22. package/dist/main/hooks/use-fresh-node.js +1 -2
  23. package/dist/main/hooks/use-simple-tree.js +1 -2
  24. package/dist/main/hooks/use-validated-props.js +1 -2
  25. package/dist/main/interfaces/tree-api.d.ts +4 -4
  26. package/dist/main/interfaces/tree-api.js +5 -7
  27. package/dist/main/state/dnd-slice.js +2 -2
  28. package/dist/main/state/drag-slice.js +1 -2
  29. package/dist/main/state/edit-slice.js +2 -3
  30. package/dist/main/state/focus-slice.js +3 -4
  31. package/dist/main/state/open-slice.js +2 -2
  32. package/dist/main/state/root-reducer.d.ts +4 -4
  33. package/dist/main/state/selection-slice.js +2 -2
  34. package/dist/main/utils.js +18 -18
  35. package/dist/module/components/list-outer-element.d.ts +0 -1
  36. package/dist/module/components/tree.d.ts +1 -2
  37. package/dist/module/dnd/drag-hook.js +1 -1
  38. package/dist/module/interfaces/tree-api.d.ts +4 -4
  39. package/dist/module/interfaces/tree-api.js +5 -7
  40. package/dist/module/state/root-reducer.d.ts +4 -4
  41. package/package.json +2 -2
  42. package/src/dnd/drag-hook.ts +1 -1
  43. package/src/interfaces/tree-api.ts +2 -2
package/README.md CHANGED
@@ -68,6 +68,8 @@ const data = [
68
68
  Use all the defaults. The _initialData_ prop makes the tree an uncontrolled component. Create, move, rename, and delete will be handled internally.
69
69
 
70
70
  ```jsx
71
+ import { Tree } from 'react-arborist';
72
+
71
73
  function App() {
72
74
  return <Tree initialData={data} />;
73
75
  }
@@ -241,6 +243,20 @@ function App() {
241
243
  }
242
244
  ```
243
245
 
246
+ ### Dynamic sizing
247
+
248
+ You can add a ref to it with this package [ZeeCoder/use-resize-observer](https://github.com/ZeeCoder/use-resize-observer)
249
+
250
+ That hook will return the height and width of the parent whenever it changes. You then pass these numbers to the Tree.
251
+
252
+ ```js
253
+ const { ref, width, height } = useResizeObserver();
254
+
255
+ <div className="parent" ref={ref}>
256
+ <Tree height={height} width={width} />
257
+ </div>
258
+ ```
259
+
244
260
  ## API Reference
245
261
 
246
262
  - Components
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Cursor = void 0;
3
+ exports.Cursor = Cursor;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const context_1 = require("../context");
6
6
  function Cursor() {
@@ -17,4 +17,3 @@ function Cursor() {
17
17
  const Cursor = tree.renderCursor;
18
18
  return (0, jsx_runtime_1.jsx)(Cursor, { top, left, indent });
19
19
  }
20
- exports.Cursor = Cursor;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.DefaultContainer = void 0;
3
+ exports.DefaultContainer = DefaultContainer;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_window_1 = require("react-window");
6
6
  const context_1 = require("../context");
@@ -235,4 +235,3 @@ function DefaultContainer() {
235
235
  tree.focus(node.id);
236
236
  }, children: (0, jsx_runtime_1.jsx)(react_window_1.FixedSizeList, { className: tree.props.className, outerRef: tree.listEl, itemCount: tree.visibleNodes.length, height: tree.height, width: tree.width, itemSize: tree.rowHeight, overscanCount: tree.overscanCount, itemKey: (index) => { var _a; return ((_a = tree.visibleNodes[index]) === null || _a === void 0 ? void 0 : _a.id) || index; }, outerElementType: list_outer_element_1.ListOuterElement, innerElementType: list_inner_element_1.ListInnerElement, onScroll: tree.props.onScroll, onItemsRendered: tree.onItemsRendered.bind(tree), ref: tree.list, children: row_container_1.RowContainer }) }));
237
237
  }
238
- exports.DefaultContainer = DefaultContainer;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.DefaultDragPreview = void 0;
3
+ exports.DefaultDragPreview = DefaultDragPreview;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_1 = require("react");
6
6
  const context_1 = require("../context");
@@ -28,7 +28,6 @@ const getCountStyle = (offset) => {
28
28
  function DefaultDragPreview({ offset, mouse, id, dragIds, isDragging, }) {
29
29
  return ((0, jsx_runtime_1.jsxs)(Overlay, { isDragging: isDragging, children: [(0, jsx_runtime_1.jsx)(Position, { offset: offset, children: (0, jsx_runtime_1.jsx)(PreviewNode, { id: id, dragIds: dragIds }) }), (0, jsx_runtime_1.jsx)(Count, { mouse: mouse, count: dragIds.length })] }));
30
30
  }
31
- exports.DefaultDragPreview = DefaultDragPreview;
32
31
  const Overlay = (0, react_1.memo)(function Overlay(props) {
33
32
  if (!props.isDragging)
34
33
  return null;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.DefaultNode = void 0;
3
+ exports.DefaultNode = DefaultNode;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_1 = require("react");
6
6
  function DefaultNode(props) {
@@ -9,7 +9,6 @@ function DefaultNode(props) {
9
9
  props.node.toggle();
10
10
  }, children: props.node.isLeaf ? "🌳" : props.node.isOpen ? "🗁" : "🗀" }), " ", props.node.isEditing ? (0, jsx_runtime_1.jsx)(Edit, Object.assign({}, props)) : (0, jsx_runtime_1.jsx)(Show, Object.assign({}, props))] }));
11
11
  }
12
- exports.DefaultNode = DefaultNode;
13
12
  function Show(props) {
14
13
  return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("span", { children: props.node.data.name }) }));
15
14
  }
@@ -1,8 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.DefaultRow = void 0;
3
+ exports.DefaultRow = DefaultRow;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  function DefaultRow({ node, attrs, innerRef, children, }) {
6
6
  return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, attrs, { ref: innerRef, onFocus: (e) => e.stopPropagation(), onClick: node.handleClick, children: children })));
7
7
  }
8
- exports.DefaultRow = DefaultRow;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.DragPreviewContainer = void 0;
3
+ exports.DragPreviewContainer = DragPreviewContainer;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_dnd_1 = require("react-dnd");
6
6
  const context_1 = require("../context");
@@ -18,4 +18,3 @@ function DragPreviewContainer() {
18
18
  const DragPreview = tree.props.renderDragPreview || default_drag_preview_1.DefaultDragPreview;
19
19
  return ((0, jsx_runtime_1.jsx)(DragPreview, { offset: offset, mouse: mouse, id: (item === null || item === void 0 ? void 0 : item.id) || null, dragIds: (item === null || item === void 0 ? void 0 : item.dragIds) || [], isDragging: isDragging }));
20
20
  }
21
- exports.DragPreviewContainer = DragPreviewContainer;
@@ -1,2 +1 @@
1
- /// <reference types="react" />
2
1
  export declare const ListOuterElement: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<unknown>>;
@@ -1,9 +1,8 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.OuterDrop = void 0;
3
+ exports.OuterDrop = OuterDrop;
4
4
  const outer_drop_hook_1 = require("../dnd/outer-drop-hook");
5
5
  function OuterDrop(props) {
6
6
  (0, outer_drop_hook_1.useOuterDrop)();
7
7
  return props.children;
8
8
  }
9
- exports.OuterDrop = OuterDrop;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.TreeProvider = void 0;
3
+ exports.TreeProvider = TreeProvider;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_1 = require("react");
6
6
  const shim_1 = require("use-sync-external-store/shim");
@@ -49,4 +49,3 @@ function TreeProvider({ treeProps, imperativeHandle, children, }) {
49
49
  }, [api.props.searchTerm]);
50
50
  return ((0, jsx_runtime_1.jsx)(context_1.TreeApiContext.Provider, { value: api, children: (0, jsx_runtime_1.jsx)(context_1.DataUpdatesContext.Provider, { value: updateCount.current, children: (0, jsx_runtime_1.jsx)(context_1.NodesContext.Provider, { value: state.nodes, children: (0, jsx_runtime_1.jsx)(context_1.DndContext.Provider, { value: state.dnd, children: (0, jsx_runtime_1.jsx)(react_dnd_1.DndProvider, Object.assign({ backend: react_dnd_html5_backend_1.HTML5Backend, options: { rootElement: api.props.dndRootElement || undefined } }, (treeProps.dndManager && { manager: treeProps.dndManager }), { children: children })) }) }) }) }));
51
51
  }
52
- exports.TreeProvider = TreeProvider;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.TreeContainer = void 0;
3
+ exports.TreeContainer = TreeContainer;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const context_1 = require("../context");
6
6
  const default_container_1 = require("./default-container");
@@ -9,4 +9,3 @@ function TreeContainer() {
9
9
  const Container = tree.props.renderContainer || default_container_1.DefaultContainer;
10
10
  return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Container, {}) }));
11
11
  }
12
- exports.TreeContainer = TreeContainer;
@@ -1,8 +1,7 @@
1
- /// <reference types="react" />
2
1
  import { TreeApi } from "../interfaces/tree-api";
3
2
  import { TreeProps } from "../types/tree-props";
4
3
  declare function TreeComponent<T>(props: TreeProps<T>, ref: React.Ref<TreeApi<T> | undefined>): import("react/jsx-runtime").JSX.Element;
5
4
  export declare const Tree: <T>(props: TreeProps<T> & {
6
- ref?: import("react").ForwardedRef<TreeApi<T> | undefined> | undefined;
5
+ ref?: React.ForwardedRef<TreeApi<T> | undefined>;
7
6
  }) => ReturnType<typeof TreeComponent>;
8
7
  export {};
@@ -1,6 +1,10 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useDataUpdates = exports.DataUpdatesContext = exports.useDndContext = exports.DndContext = exports.useNodesContext = exports.NodesContext = exports.useTreeApi = exports.TreeApiContext = void 0;
3
+ exports.DataUpdatesContext = exports.DndContext = exports.NodesContext = exports.TreeApiContext = void 0;
4
+ exports.useTreeApi = useTreeApi;
5
+ exports.useNodesContext = useNodesContext;
6
+ exports.useDndContext = useDndContext;
7
+ exports.useDataUpdates = useDataUpdates;
4
8
  const react_1 = require("react");
5
9
  exports.TreeApiContext = (0, react_1.createContext)(null);
6
10
  function useTreeApi() {
@@ -9,7 +13,6 @@ function useTreeApi() {
9
13
  throw new Error("No Tree Api Provided");
10
14
  return value;
11
15
  }
12
- exports.useTreeApi = useTreeApi;
13
16
  exports.NodesContext = (0, react_1.createContext)(null);
14
17
  function useNodesContext() {
15
18
  const value = (0, react_1.useContext)(exports.NodesContext);
@@ -17,7 +20,6 @@ function useNodesContext() {
17
20
  throw new Error("Provide a NodesContext");
18
21
  return value;
19
22
  }
20
- exports.useNodesContext = useNodesContext;
21
23
  exports.DndContext = (0, react_1.createContext)(null);
22
24
  function useDndContext() {
23
25
  const value = (0, react_1.useContext)(exports.DndContext);
@@ -25,9 +27,7 @@ function useDndContext() {
25
27
  throw new Error("Provide a DnDContext");
26
28
  return value;
27
29
  }
28
- exports.useDndContext = useDndContext;
29
30
  exports.DataUpdatesContext = (0, react_1.createContext)(0);
30
31
  function useDataUpdates() {
31
32
  (0, react_1.useContext)(exports.DataUpdatesContext);
32
33
  }
33
- exports.useDataUpdates = useDataUpdates;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.createList = void 0;
3
+ exports.createList = createList;
4
4
  function createList(tree) {
5
5
  if (tree.isFiltered) {
6
6
  return flattenAndFilterTree(tree.root, tree.isMatch.bind(tree));
@@ -9,7 +9,6 @@ function createList(tree) {
9
9
  return flattenTree(tree.root);
10
10
  }
11
11
  }
12
- exports.createList = createList;
13
12
  function flattenTree(root) {
14
13
  const list = [];
15
14
  function collect(node) {
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.createRoot = exports.ROOT_ID = void 0;
3
+ exports.ROOT_ID = void 0;
4
+ exports.createRoot = createRoot;
4
5
  const node_api_1 = require("../interfaces/node-api");
5
6
  exports.ROOT_ID = "__REACT_ARBORIST_INTERNAL_ROOT__";
6
7
  function createRoot(tree) {
@@ -40,4 +41,3 @@ function createRoot(tree) {
40
41
  });
41
42
  return root;
42
43
  }
43
- exports.createRoot = createRoot;
@@ -3,7 +3,7 @@
3
3
  // Each line is a node
4
4
  // The number of spaces at the beginning indicate the level
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.makeTree = void 0;
6
+ exports.makeTree = makeTree;
7
7
  function makeTree(string) {
8
8
  const root = { id: "ROOT", name: "ROOT", isOpen: true };
9
9
  let prevNode = root;
@@ -37,4 +37,3 @@ function makeTree(string) {
37
37
  });
38
38
  return root;
39
39
  }
40
- exports.makeTree = makeTree;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.computeDrop = void 0;
3
+ exports.computeDrop = computeDrop;
4
4
  const utils_1 = require("../utils");
5
5
  function measureHover(el, offset) {
6
6
  const rect = el.getBoundingClientRect();
@@ -140,4 +140,3 @@ function computeDrop(args) {
140
140
  cursor: lineCursor(above.rowIndex + 1, above.level + 1),
141
141
  };
142
142
  }
143
- exports.computeDrop = computeDrop;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useDragHook = void 0;
3
+ exports.useDragHook = useDragHook;
4
4
  const react_1 = require("react");
5
5
  const react_dnd_1 = require("react-dnd");
6
6
  const react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
@@ -18,7 +18,7 @@ function useDragHook(node) {
18
18
  // This is fired once at the begging of a drag operation
19
19
  const dragIds = tree.isSelected(node.id) ? Array.from(ids) : [node.id];
20
20
  tree.dispatch(dnd_slice_1.actions.dragStart(node.id, dragIds));
21
- return { id: node.id };
21
+ return { id: node.id, dragIds };
22
22
  },
23
23
  end: () => {
24
24
  tree.hideCursor();
@@ -43,4 +43,3 @@ function useDragHook(node) {
43
43
  }, [preview]);
44
44
  return ref;
45
45
  }
46
- exports.useDragHook = useDragHook;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useDropHook = void 0;
3
+ exports.useDropHook = useDropHook;
4
4
  const react_dnd_1 = require("react-dnd");
5
5
  const context_1 = require("../context");
6
6
  const compute_drop_1 = require("./compute-drop");
@@ -39,4 +39,3 @@ function useDropHook(el, node) {
39
39
  }), [node, el.current, tree.props]);
40
40
  return dropRef;
41
41
  }
42
- exports.useDropHook = useDropHook;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.measureHover = void 0;
3
+ exports.measureHover = measureHover;
4
4
  const utils_1 = require("../utils");
5
5
  function measureHover(el, offset, indent) {
6
6
  const nextEl = el.nextElementSibling;
@@ -18,4 +18,3 @@ function measureHover(el, offset, indent) {
18
18
  const level = (0, utils_1.bound)(Math.floor(x / indent), minLevel, maxLevel);
19
19
  return { level, inTopHalf, inBottomHalf, inMiddle };
20
20
  }
21
- exports.measureHover = measureHover;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useOuterDrop = void 0;
3
+ exports.useOuterDrop = useOuterDrop;
4
4
  const react_dnd_1 = require("react-dnd");
5
5
  const context_1 = require("../context");
6
6
  const compute_drop_1 = require("./compute-drop");
@@ -42,4 +42,3 @@ function useOuterDrop() {
42
42
  }), [tree]);
43
43
  drop(tree.listEl);
44
44
  }
45
- exports.useOuterDrop = useOuterDrop;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useFreshNode = void 0;
3
+ exports.useFreshNode = useFreshNode;
4
4
  const react_1 = require("react");
5
5
  const context_1 = require("../context");
6
6
  function useFreshNode(index) {
@@ -15,4 +15,3 @@ function useFreshNode(index) {
15
15
  // Return a fresh instance if the state values change
16
16
  }, [...Object.values(original.state), original]);
17
17
  }
18
- exports.useFreshNode = useFreshNode;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useSimpleTree = void 0;
3
+ exports.useSimpleTree = useSimpleTree;
4
4
  const react_1 = require("react");
5
5
  const simple_tree_1 = require("../data/simple-tree");
6
6
  let nextId = 0;
@@ -32,4 +32,3 @@ function useSimpleTree(initialData) {
32
32
  const controller = { onMove, onRename, onCreate, onDelete };
33
33
  return [data, controller];
34
34
  }
35
- exports.useSimpleTree = useSimpleTree;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useValidatedProps = void 0;
3
+ exports.useValidatedProps = useValidatedProps;
4
4
  const use_simple_tree_1 = require("./use-simple-tree");
5
5
  function useValidatedProps(props) {
6
6
  if (props.initialData && props.data) {
@@ -26,4 +26,3 @@ Use the data prop if you want to provide your own handlers.`);
26
26
  return props;
27
27
  }
28
28
  }
29
- exports.useValidatedProps = useValidatedProps;
@@ -62,11 +62,11 @@ export declare class TreeApi<T> {
62
62
  type: "SELECTION_ONLY";
63
63
  id: string;
64
64
  };
65
- add: (id: string | IdObj | string[] | IdObj[]) => {
65
+ add: (id: string | string[] | IdObj | IdObj[]) => {
66
66
  type: "SELECTION_ADD";
67
67
  ids: string[];
68
68
  };
69
- remove: (id: string | IdObj | string[] | IdObj[]) => {
69
+ remove: (id: string | string[] | IdObj | IdObj[]) => {
70
70
  type: "SELECTION_REMOVE";
71
71
  ids: string[];
72
72
  };
@@ -80,11 +80,11 @@ export declare class TreeApi<T> {
80
80
  mostRecent: string | null;
81
81
  type: "SELECTION_SET";
82
82
  };
83
- mostRecent: (id: string | IdObj | null) => {
83
+ mostRecent: (id: string | null | IdObj) => {
84
84
  type: "SELECTION_MOST_RECENT";
85
85
  id: string | null;
86
86
  };
87
- anchor: (id: string | IdObj | null) => {
87
+ anchor: (id: string | null | IdObj) => {
88
88
  type: "SELECTION_ANCHOR";
89
89
  id: string | null;
90
90
  };
@@ -192,9 +192,9 @@ class TreeApi {
192
192
  createLeaf() {
193
193
  return this.create({ type: "leaf" });
194
194
  }
195
- create(opts = {}) {
196
- var _a, _b;
197
- return __awaiter(this, void 0, void 0, function* () {
195
+ create() {
196
+ return __awaiter(this, arguments, void 0, function* (opts = {}) {
197
+ var _a, _b;
198
198
  const parentId = opts.parentId === undefined
199
199
  ? utils.getInsertParentId(this)
200
200
  : opts.parentId;
@@ -588,14 +588,12 @@ class TreeApi {
588
588
  }
589
589
  }
590
590
  isEditable(data) {
591
- var _a;
592
591
  const check = this.props.disableEdit || (() => false);
593
- return (_a = !utils.access(data, check)) !== null && _a !== void 0 ? _a : true;
592
+ return !utils.access(data, check);
594
593
  }
595
594
  isDraggable(data) {
596
- var _a;
597
595
  const check = this.props.disableDrag || (() => false);
598
- return (_a = !utils.access(data, check)) !== null && _a !== void 0 ? _a : true;
596
+ return !utils.access(data, check);
599
597
  }
600
598
  isDragging(node) {
601
599
  const id = identifyNull(node);
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.reducer = exports.actions = void 0;
3
+ exports.actions = void 0;
4
+ exports.reducer = reducer;
4
5
  const initial_1 = require("./initial");
5
6
  /* Actions */
6
7
  exports.actions = {
@@ -32,4 +33,3 @@ function reducer(state = (0, initial_1.initialState)()["dnd"], action) {
32
33
  return state;
33
34
  }
34
35
  }
35
- exports.reducer = reducer;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.reducer = void 0;
3
+ exports.reducer = reducer;
4
4
  const initial_1 = require("./initial");
5
5
  /* Reducer */
6
6
  function reducer(state = (0, initial_1.initialState)().nodes.drag, action) {
@@ -21,4 +21,3 @@ function reducer(state = (0, initial_1.initialState)().nodes.drag, action) {
21
21
  return state;
22
22
  }
23
23
  }
24
- exports.reducer = reducer;
@@ -1,11 +1,11 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.reducer = exports.edit = void 0;
3
+ exports.edit = edit;
4
+ exports.reducer = reducer;
4
5
  /* Actions */
5
6
  function edit(id) {
6
7
  return { type: "EDIT", id };
7
8
  }
8
- exports.edit = edit;
9
9
  /* Reducer */
10
10
  function reducer(state = { id: null }, action) {
11
11
  if (action.type === "EDIT") {
@@ -15,4 +15,3 @@ function reducer(state = { id: null }, action) {
15
15
  return state;
16
16
  }
17
17
  }
18
- exports.reducer = reducer;
@@ -1,16 +1,16 @@
1
1
  "use strict";
2
2
  /* Types */
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.reducer = exports.treeBlur = exports.focus = void 0;
4
+ exports.focus = focus;
5
+ exports.treeBlur = treeBlur;
6
+ exports.reducer = reducer;
5
7
  /* Actions */
6
8
  function focus(id) {
7
9
  return { type: "FOCUS", id };
8
10
  }
9
- exports.focus = focus;
10
11
  function treeBlur() {
11
12
  return { type: "TREE_BLUR" };
12
13
  }
13
- exports.treeBlur = treeBlur;
14
14
  /* Reducer */
15
15
  function reducer(state = { id: null, treeFocused: false }, action) {
16
16
  if (action.type === "FOCUS") {
@@ -23,4 +23,3 @@ function reducer(state = { id: null, treeFocused: false }, action) {
23
23
  return state;
24
24
  }
25
25
  }
26
- exports.reducer = reducer;
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.reducer = exports.actions = void 0;
3
+ exports.actions = void 0;
4
+ exports.reducer = reducer;
4
5
  /* Actions */
5
6
  exports.actions = {
6
7
  open(id, filtered) {
@@ -45,4 +46,3 @@ function reducer(state = { filtered: {}, unfiltered: {} }, action) {
45
46
  return Object.assign(Object.assign({}, state), { unfiltered: openMapReducer(state.unfiltered, action) });
46
47
  }
47
48
  }
48
- exports.reducer = reducer;
@@ -44,11 +44,11 @@ export declare const rootReducer: import("redux").Reducer<{
44
44
  type: "SELECTION_ONLY";
45
45
  id: string;
46
46
  };
47
- add: (id: string | import("../types/utils").IdObj | string[] | import("../types/utils").IdObj[]) => {
47
+ add: (id: string | string[] | import("../types/utils").IdObj | import("../types/utils").IdObj[]) => {
48
48
  type: "SELECTION_ADD";
49
49
  ids: string[];
50
50
  };
51
- remove: (id: string | import("../types/utils").IdObj | string[] | import("../types/utils").IdObj[]) => {
51
+ remove: (id: string | string[] | import("../types/utils").IdObj | import("../types/utils").IdObj[]) => {
52
52
  type: "SELECTION_REMOVE";
53
53
  ids: string[];
54
54
  };
@@ -62,11 +62,11 @@ export declare const rootReducer: import("redux").Reducer<{
62
62
  mostRecent: string | null;
63
63
  type: "SELECTION_SET";
64
64
  };
65
- mostRecent: (id: string | import("../types/utils").IdObj | null) => {
65
+ mostRecent: (id: string | null | import("../types/utils").IdObj) => {
66
66
  type: "SELECTION_MOST_RECENT";
67
67
  id: string | null;
68
68
  };
69
- anchor: (id: string | import("../types/utils").IdObj | null) => {
69
+ anchor: (id: string | null | import("../types/utils").IdObj) => {
70
70
  type: "SELECTION_ANCHOR";
71
71
  id: string | null;
72
72
  };
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.reducer = exports.actions = void 0;
3
+ exports.actions = void 0;
4
+ exports.reducer = reducer;
4
5
  const utils_1 = require("../utils");
5
6
  const initial_1 = require("./initial");
6
7
  /* Actions */
@@ -56,4 +57,3 @@ function reducer(state = (0, initial_1.initialState)()["nodes"]["selection"], ac
56
57
  return state;
57
58
  }
58
59
  }
59
- exports.reducer = reducer;
@@ -1,23 +1,36 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.getInsertParentId = exports.getInsertIndex = exports.waitFor = exports.safeRun = exports.mergeRefs = exports.identify = exports.identifyNull = exports.access = exports.focusPrevElement = exports.focusNextElement = exports.walk = exports.dfs = exports.noop = exports.indexOf = exports.isDescendant = exports.isOpenWithEmptyChildren = exports.isClosed = exports.isItem = exports.bound = void 0;
3
+ exports.indexOf = exports.isDescendant = void 0;
4
+ exports.bound = bound;
5
+ exports.isItem = isItem;
6
+ exports.isClosed = isClosed;
7
+ exports.isOpenWithEmptyChildren = isOpenWithEmptyChildren;
8
+ exports.noop = noop;
9
+ exports.dfs = dfs;
10
+ exports.walk = walk;
11
+ exports.focusNextElement = focusNextElement;
12
+ exports.focusPrevElement = focusPrevElement;
13
+ exports.access = access;
14
+ exports.identifyNull = identifyNull;
15
+ exports.identify = identify;
16
+ exports.mergeRefs = mergeRefs;
17
+ exports.safeRun = safeRun;
18
+ exports.waitFor = waitFor;
19
+ exports.getInsertIndex = getInsertIndex;
20
+ exports.getInsertParentId = getInsertParentId;
4
21
  function bound(n, min, max) {
5
22
  return Math.max(Math.min(n, max), min);
6
23
  }
7
- exports.bound = bound;
8
24
  function isItem(node) {
9
25
  return node && node.isLeaf;
10
26
  }
11
- exports.isItem = isItem;
12
27
  function isClosed(node) {
13
28
  return node && node.isInternal && !node.isOpen;
14
29
  }
15
- exports.isClosed = isClosed;
16
30
  function isOpenWithEmptyChildren(node) {
17
31
  var _a;
18
32
  return node && node.isOpen && !((_a = node.children) === null || _a === void 0 ? void 0 : _a.length);
19
33
  }
20
- exports.isOpenWithEmptyChildren = isOpenWithEmptyChildren;
21
34
  /**
22
35
  * Is first param a descendant of the second param
23
36
  */
@@ -38,7 +51,6 @@ const indexOf = (node) => {
38
51
  };
39
52
  exports.indexOf = indexOf;
40
53
  function noop() { }
41
- exports.noop = noop;
42
54
  function dfs(node, id) {
43
55
  if (!node)
44
56
  return null;
@@ -53,7 +65,6 @@ function dfs(node, id) {
53
65
  }
54
66
  return null;
55
67
  }
56
- exports.dfs = dfs;
57
68
  function walk(node, fn) {
58
69
  fn(node);
59
70
  if (node.children) {
@@ -62,7 +73,6 @@ function walk(node, fn) {
62
73
  }
63
74
  }
64
75
  }
65
- exports.walk = walk;
66
76
  function focusNextElement(target) {
67
77
  const elements = getFocusable(target);
68
78
  let next;
@@ -76,7 +86,6 @@ function focusNextElement(target) {
76
86
  // @ts-ignore ??
77
87
  next === null || next === void 0 ? void 0 : next.focus();
78
88
  }
79
- exports.focusNextElement = focusNextElement;
80
89
  function focusPrevElement(target) {
81
90
  const elements = getFocusable(target);
82
91
  let next;
@@ -90,7 +99,6 @@ function focusPrevElement(target) {
90
99
  // @ts-ignore
91
100
  next === null || next === void 0 ? void 0 : next.focus();
92
101
  }
93
- exports.focusPrevElement = focusPrevElement;
94
102
  function nextItem(list, index) {
95
103
  if (index + 1 < list.length) {
96
104
  return list[index + 1];
@@ -117,18 +125,15 @@ function access(obj, accessor) {
117
125
  return obj[accessor];
118
126
  return accessor(obj);
119
127
  }
120
- exports.access = access;
121
128
  function identifyNull(obj) {
122
129
  if (obj === null)
123
130
  return null;
124
131
  else
125
132
  return identify(obj);
126
133
  }
127
- exports.identifyNull = identifyNull;
128
134
  function identify(obj) {
129
135
  return typeof obj === "string" ? obj : obj.id;
130
136
  }
131
- exports.identify = identify;
132
137
  function mergeRefs(...refs) {
133
138
  return (instance) => {
134
139
  refs.forEach((ref) => {
@@ -141,12 +146,10 @@ function mergeRefs(...refs) {
141
146
  });
142
147
  };
143
148
  }
144
- exports.mergeRefs = mergeRefs;
145
149
  function safeRun(fn, ...args) {
146
150
  if (fn)
147
151
  return fn(...args);
148
152
  }
149
- exports.safeRun = safeRun;
150
153
  function waitFor(fn) {
151
154
  return new Promise((resolve, reject) => {
152
155
  let tries = 0;
@@ -162,7 +165,6 @@ function waitFor(fn) {
162
165
  check();
163
166
  });
164
167
  }
165
- exports.waitFor = waitFor;
166
168
  function getInsertIndex(tree) {
167
169
  var _a, _b;
168
170
  const focus = tree.focusedNode;
@@ -174,7 +176,6 @@ function getInsertIndex(tree) {
174
176
  return focus.childIndex + 1;
175
177
  return 0;
176
178
  }
177
- exports.getInsertIndex = getInsertIndex;
178
179
  function getInsertParentId(tree) {
179
180
  const focus = tree.focusedNode;
180
181
  if (!focus)
@@ -185,4 +186,3 @@ function getInsertParentId(tree) {
185
186
  return focus.parent.id;
186
187
  return null;
187
188
  }
188
- exports.getInsertParentId = getInsertParentId;
@@ -1,2 +1 @@
1
- /// <reference types="react" />
2
1
  export declare const ListOuterElement: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<unknown>>;
@@ -1,8 +1,7 @@
1
- /// <reference types="react" />
2
1
  import { TreeApi } from "../interfaces/tree-api";
3
2
  import { TreeProps } from "../types/tree-props";
4
3
  declare function TreeComponent<T>(props: TreeProps<T>, ref: React.Ref<TreeApi<T> | undefined>): import("react/jsx-runtime").JSX.Element;
5
4
  export declare const Tree: <T>(props: TreeProps<T> & {
6
- ref?: import("react").ForwardedRef<TreeApi<T> | undefined> | undefined;
5
+ ref?: React.ForwardedRef<TreeApi<T> | undefined>;
7
6
  }) => ReturnType<typeof TreeComponent>;
8
7
  export {};
@@ -15,7 +15,7 @@ export function useDragHook(node) {
15
15
  // This is fired once at the begging of a drag operation
16
16
  const dragIds = tree.isSelected(node.id) ? Array.from(ids) : [node.id];
17
17
  tree.dispatch(dnd.dragStart(node.id, dragIds));
18
- return { id: node.id };
18
+ return { id: node.id, dragIds };
19
19
  },
20
20
  end: () => {
21
21
  tree.hideCursor();
@@ -62,11 +62,11 @@ export declare class TreeApi<T> {
62
62
  type: "SELECTION_ONLY";
63
63
  id: string;
64
64
  };
65
- add: (id: string | IdObj | string[] | IdObj[]) => {
65
+ add: (id: string | string[] | IdObj | IdObj[]) => {
66
66
  type: "SELECTION_ADD";
67
67
  ids: string[];
68
68
  };
69
- remove: (id: string | IdObj | string[] | IdObj[]) => {
69
+ remove: (id: string | string[] | IdObj | IdObj[]) => {
70
70
  type: "SELECTION_REMOVE";
71
71
  ids: string[];
72
72
  };
@@ -80,11 +80,11 @@ export declare class TreeApi<T> {
80
80
  mostRecent: string | null;
81
81
  type: "SELECTION_SET";
82
82
  };
83
- mostRecent: (id: string | IdObj | null) => {
83
+ mostRecent: (id: string | null | IdObj) => {
84
84
  type: "SELECTION_MOST_RECENT";
85
85
  id: string | null;
86
86
  };
87
- anchor: (id: string | IdObj | null) => {
87
+ anchor: (id: string | null | IdObj) => {
88
88
  type: "SELECTION_ANCHOR";
89
89
  id: string | null;
90
90
  };
@@ -166,9 +166,9 @@ export class TreeApi {
166
166
  createLeaf() {
167
167
  return this.create({ type: "leaf" });
168
168
  }
169
- create(opts = {}) {
170
- var _a, _b;
171
- return __awaiter(this, void 0, void 0, function* () {
169
+ create() {
170
+ return __awaiter(this, arguments, void 0, function* (opts = {}) {
171
+ var _a, _b;
172
172
  const parentId = opts.parentId === undefined
173
173
  ? utils.getInsertParentId(this)
174
174
  : opts.parentId;
@@ -562,14 +562,12 @@ export class TreeApi {
562
562
  }
563
563
  }
564
564
  isEditable(data) {
565
- var _a;
566
565
  const check = this.props.disableEdit || (() => false);
567
- return (_a = !utils.access(data, check)) !== null && _a !== void 0 ? _a : true;
566
+ return !utils.access(data, check);
568
567
  }
569
568
  isDraggable(data) {
570
- var _a;
571
569
  const check = this.props.disableDrag || (() => false);
572
- return (_a = !utils.access(data, check)) !== null && _a !== void 0 ? _a : true;
570
+ return !utils.access(data, check);
573
571
  }
574
572
  isDragging(node) {
575
573
  const id = identifyNull(node);
@@ -44,11 +44,11 @@ export declare const rootReducer: import("redux").Reducer<{
44
44
  type: "SELECTION_ONLY";
45
45
  id: string;
46
46
  };
47
- add: (id: string | import("../types/utils").IdObj | string[] | import("../types/utils").IdObj[]) => {
47
+ add: (id: string | string[] | import("../types/utils").IdObj | import("../types/utils").IdObj[]) => {
48
48
  type: "SELECTION_ADD";
49
49
  ids: string[];
50
50
  };
51
- remove: (id: string | import("../types/utils").IdObj | string[] | import("../types/utils").IdObj[]) => {
51
+ remove: (id: string | string[] | import("../types/utils").IdObj | import("../types/utils").IdObj[]) => {
52
52
  type: "SELECTION_REMOVE";
53
53
  ids: string[];
54
54
  };
@@ -62,11 +62,11 @@ export declare const rootReducer: import("redux").Reducer<{
62
62
  mostRecent: string | null;
63
63
  type: "SELECTION_SET";
64
64
  };
65
- mostRecent: (id: string | import("../types/utils").IdObj | null) => {
65
+ mostRecent: (id: string | null | import("../types/utils").IdObj) => {
66
66
  type: "SELECTION_MOST_RECENT";
67
67
  id: string | null;
68
68
  };
69
- anchor: (id: string | import("../types/utils").IdObj | null) => {
69
+ anchor: (id: string | null | import("../types/utils").IdObj) => {
70
70
  type: "SELECTION_ANCHOR";
71
71
  id: string | null;
72
72
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-arborist",
3
- "version": "3.4.0",
3
+ "version": "3.4.1",
4
4
  "license": "MIT",
5
5
  "source": "src/index.ts",
6
6
  "main": "dist/main/index.js",
@@ -57,6 +57,6 @@
57
57
  "npm-run-all": "^4.1.5",
58
58
  "rimraf": "^5.0.5",
59
59
  "ts-jest": "^29.1.1",
60
- "typescript": "^5.3.3"
60
+ "typescript": "^5.6.0"
61
61
  }
62
62
  }
@@ -20,7 +20,7 @@ export function useDragHook<T>(node: NodeApi<T>): ConnectDragSource {
20
20
  // This is fired once at the begging of a drag operation
21
21
  const dragIds = tree.isSelected(node.id) ? Array.from(ids) : [node.id];
22
22
  tree.dispatch(dnd.dragStart(node.id, dragIds));
23
- return { id: node.id };
23
+ return { id: node.id, dragIds };
24
24
  },
25
25
  end: () => {
26
26
  tree.hideCursor();
@@ -593,12 +593,12 @@ export class TreeApi<T> {
593
593
 
594
594
  isEditable(data: T) {
595
595
  const check = this.props.disableEdit || (() => false);
596
- return !utils.access(data, check) ?? true;
596
+ return !utils.access(data, check);
597
597
  }
598
598
 
599
599
  isDraggable(data: T) {
600
600
  const check = this.props.disableDrag || (() => false);
601
- return !utils.access(data, check) ?? true;
601
+ return !utils.access(data, check);
602
602
  }
603
603
 
604
604
  isDragging(node: string | IdObj | null) {