@headless-tree/react 1.2.1 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @headless-tree/react
 
+## 1.4.0
+
+## 1.3.0
+
+### Patch Changes
+
+- 32e71e9: Added optional @headless-tree/react/react17 import for useTree for compatibility
+- 662e2a8: Improved customizability of checkboxes feature (still alpha state), allowing you to customize `propagateCheckedState` and `canCheckFolders` independently
+- 662e2a8: Changed to new buildtool in core packages (now using tsup) to hopefully fix some ESM/CJS integrations
+
 ## 1.2.1
 
 ### Patch Changes

package/dist/chunk-FWCSY2DS.mjs

@@ -0,0 +1,37 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+export {
+  __spreadValues,
+  __spreadProps,
+  __objRest
+};

package/dist/index.d.mts

@@ -0,0 +1,13 @@
+import React, { HTMLProps } from 'react';
+import * as _headless_tree_core from '@headless-tree/core';
+import { TreeInstance, DndState, AssistiveDndState, HotkeysConfig, TreeConfig } from '@headless-tree/core';
+
+declare const getDefaultLabel: <T>(dnd: DndState<T> | null | undefined, assistiveState: AssistiveDndState, hotkeys: HotkeysConfig<T>) => string;
+declare const AssistiveTreeDescription: <T>({ tree, getLabel, ...props }: {
+    tree: TreeInstance<T>;
+    getLabel?: typeof getDefaultLabel;
+} & HTMLProps<HTMLSpanElement>) => React.JSX.Element;
+
+declare const useTree: <T>(config: TreeConfig<T>) => _headless_tree_core.TreeInstance<T>;
+
+export { AssistiveTreeDescription, useTree };

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import React, { HTMLProps } from 'react';
+import * as _headless_tree_core from '@headless-tree/core';
+import { TreeInstance, DndState, AssistiveDndState, HotkeysConfig, TreeConfig } from '@headless-tree/core';
+
+declare const getDefaultLabel: <T>(dnd: DndState<T> | null | undefined, assistiveState: AssistiveDndState, hotkeys: HotkeysConfig<T>) => string;
+declare const AssistiveTreeDescription: <T>({ tree, getLabel, ...props }: {
+    tree: TreeInstance<T>;
+    getLabel?: typeof getDefaultLabel;
+} & HTMLProps<HTMLSpanElement>) => React.JSX.Element;
+
+declare const useTree: <T>(config: TreeConfig<T>) => _headless_tree_core.TreeInstance<T>;
+
+export { AssistiveTreeDescription, useTree };

package/dist/index.js

@@ -0,0 +1,167 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AssistiveTreeDescription: () => AssistiveTreeDescription,
+  useTree: () => useTree
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/assistive-tree-description.tsx
+var import_react = __toESM(require("react"));
+var import_core = require("@headless-tree/core");
+var styles = {
+  position: "absolute",
+  margin: "-1px",
+  width: "1px",
+  height: "1px",
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)"
+};
+var getDefaultLabel = (dnd, assistiveState, hotkeys) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  if (!hotkeys.startDrag) return "";
+  const itemNames = (_b = (_a = dnd == null ? void 0 : dnd.draggedItems) == null ? void 0 : _a.map((item) => item.getItemName()).join(", ")) != null ? _b : "";
+  const position = !(dnd == null ? void 0 : dnd.dragTarget) ? "None" : "childIndex" in dnd.dragTarget ? `${dnd.dragTarget.childIndex} of ${dnd.dragTarget.item.getChildren().length} in ${dnd.dragTarget.item.getItemName()}` : `in ${dnd.dragTarget.item.getItemName()}`;
+  const navGuide = `Press ${(_c = hotkeys.dragUp) == null ? void 0 : _c.hotkey} and ${(_d = hotkeys.dragDown) == null ? void 0 : _d.hotkey} to move up or down, ${(_e = hotkeys.completeDrag) == null ? void 0 : _e.hotkey} to drop, ${(_f = hotkeys.cancelDrag) == null ? void 0 : _f.hotkey} to abort.`;
+  switch (assistiveState) {
+    case import_core.AssistiveDndState.Started:
+      return itemNames ? `Dragging ${itemNames}. Current position: ${position}. ${navGuide}` : `Current position: ${position}. ${navGuide}`;
+    case import_core.AssistiveDndState.Dragging:
+      return itemNames ? `${itemNames}, ${position}` : position;
+    case import_core.AssistiveDndState.Completed:
+      return `Drag completed. Press ${(_g = hotkeys.startDrag) == null ? void 0 : _g.hotkey} to move selected items`;
+    case import_core.AssistiveDndState.Aborted:
+      return `Drag cancelled. Press ${(_h = hotkeys.startDrag) == null ? void 0 : _h.hotkey} to move selected items`;
+    case import_core.AssistiveDndState.None:
+    default:
+      return `Press ${(_i = hotkeys.startDrag) == null ? void 0 : _i.hotkey} to move selected items`;
+  }
+};
+var AssistiveTreeDescription = (_a) => {
+  var _b = _a, {
+    tree,
+    getLabel = getDefaultLabel
+  } = _b, props = __objRest(_b, [
+    "tree",
+    "getLabel"
+  ]);
+  var _a2;
+  const state = tree.getState();
+  return /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    __spreadProps(__spreadValues({
+      "aria-live": "assertive"
+    }, props), {
+      style: __spreadValues(__spreadValues({}, styles), props.style)
+    }),
+    getLabel(
+      state.dnd,
+      (_a2 = state.assistiveDndState) != null ? _a2 : import_core.AssistiveDndState.None,
+      tree.getHotkeyPresets()
+    )
+  );
+};
+
+// src/use-tree.tsx
+var import_react2 = require("react");
+var import_core2 = require("@headless-tree/core");
+var useApplyAfterMount = () => {
+  const isMounted = (0, import_react2.useRef)(false);
+  const callbacks = (0, import_react2.useRef)([]);
+  (0, import_react2.useEffect)(() => {
+    isMounted.current = true;
+    callbacks.current.forEach((callback) => callback());
+  }, []);
+  const apply = (callback) => {
+    if (isMounted.current) {
+      callback();
+    } else {
+      callbacks.current.push(callback);
+    }
+  };
+  return apply;
+};
+var useTree = (config) => {
+  const apply = useApplyAfterMount();
+  const [tree] = (0, import_react2.useState)(() => ({ current: (0, import_core2.createTree)(config) }));
+  const [state, setState] = (0, import_react2.useState)(
+    () => tree.current.getState()
+  );
+  (0, import_react2.useEffect)(() => {
+    tree.current.rebuildTree();
+  }, [tree]);
+  tree.current.setConfig((prev) => __spreadProps(__spreadValues(__spreadValues({}, prev), config), {
+    state: __spreadValues(__spreadValues({}, state), config.state),
+    setState: (state2) => {
+      apply(() => {
+        var _a;
+        setState(state2);
+        (_a = config.setState) == null ? void 0 : _a.call(config, state2);
+      });
+    }
+  }));
+  return tree.current;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AssistiveTreeDescription,
+  useTree
+});

package/dist/index.mjs

@@ -0,0 +1,108 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-FWCSY2DS.mjs";
+
+// src/assistive-tree-description.tsx
+import React from "react";
+import {
+  AssistiveDndState
+} from "@headless-tree/core";
+var styles = {
+  position: "absolute",
+  margin: "-1px",
+  width: "1px",
+  height: "1px",
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)"
+};
+var getDefaultLabel = (dnd, assistiveState, hotkeys) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  if (!hotkeys.startDrag) return "";
+  const itemNames = (_b = (_a = dnd == null ? void 0 : dnd.draggedItems) == null ? void 0 : _a.map((item) => item.getItemName()).join(", ")) != null ? _b : "";
+  const position = !(dnd == null ? void 0 : dnd.dragTarget) ? "None" : "childIndex" in dnd.dragTarget ? `${dnd.dragTarget.childIndex} of ${dnd.dragTarget.item.getChildren().length} in ${dnd.dragTarget.item.getItemName()}` : `in ${dnd.dragTarget.item.getItemName()}`;
+  const navGuide = `Press ${(_c = hotkeys.dragUp) == null ? void 0 : _c.hotkey} and ${(_d = hotkeys.dragDown) == null ? void 0 : _d.hotkey} to move up or down, ${(_e = hotkeys.completeDrag) == null ? void 0 : _e.hotkey} to drop, ${(_f = hotkeys.cancelDrag) == null ? void 0 : _f.hotkey} to abort.`;
+  switch (assistiveState) {
+    case AssistiveDndState.Started:
+      return itemNames ? `Dragging ${itemNames}. Current position: ${position}. ${navGuide}` : `Current position: ${position}. ${navGuide}`;
+    case AssistiveDndState.Dragging:
+      return itemNames ? `${itemNames}, ${position}` : position;
+    case AssistiveDndState.Completed:
+      return `Drag completed. Press ${(_g = hotkeys.startDrag) == null ? void 0 : _g.hotkey} to move selected items`;
+    case AssistiveDndState.Aborted:
+      return `Drag cancelled. Press ${(_h = hotkeys.startDrag) == null ? void 0 : _h.hotkey} to move selected items`;
+    case AssistiveDndState.None:
+    default:
+      return `Press ${(_i = hotkeys.startDrag) == null ? void 0 : _i.hotkey} to move selected items`;
+  }
+};
+var AssistiveTreeDescription = (_a) => {
+  var _b = _a, {
+    tree,
+    getLabel = getDefaultLabel
+  } = _b, props = __objRest(_b, [
+    "tree",
+    "getLabel"
+  ]);
+  var _a2;
+  const state = tree.getState();
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    __spreadProps(__spreadValues({
+      "aria-live": "assertive"
+    }, props), {
+      style: __spreadValues(__spreadValues({}, styles), props.style)
+    }),
+    getLabel(
+      state.dnd,
+      (_a2 = state.assistiveDndState) != null ? _a2 : AssistiveDndState.None,
+      tree.getHotkeyPresets()
+    )
+  );
+};
+
+// src/use-tree.tsx
+import { useEffect, useRef, useState } from "react";
+import { createTree } from "@headless-tree/core";
+var useApplyAfterMount = () => {
+  const isMounted = useRef(false);
+  const callbacks = useRef([]);
+  useEffect(() => {
+    isMounted.current = true;
+    callbacks.current.forEach((callback) => callback());
+  }, []);
+  const apply = (callback) => {
+    if (isMounted.current) {
+      callback();
+    } else {
+      callbacks.current.push(callback);
+    }
+  };
+  return apply;
+};
+var useTree = (config) => {
+  const apply = useApplyAfterMount();
+  const [tree] = useState(() => ({ current: createTree(config) }));
+  const [state, setState] = useState(
+    () => tree.current.getState()
+  );
+  useEffect(() => {
+    tree.current.rebuildTree();
+  }, [tree]);
+  tree.current.setConfig((prev) => __spreadProps(__spreadValues(__spreadValues({}, prev), config), {
+    state: __spreadValues(__spreadValues({}, state), config.state),
+    setState: (state2) => {
+      apply(() => {
+        var _a;
+        setState(state2);
+        (_a = config.setState) == null ? void 0 : _a.call(config, state2);
+      });
+    }
+  }));
+  return tree.current;
+};
+export {
+  AssistiveTreeDescription,
+  useTree
+};

package/dist/react17/index.d.mts

@@ -0,0 +1,6 @@
+import * as _headless_tree_core from '@headless-tree/core';
+import { TreeConfig } from '@headless-tree/core';
+
+declare const useTree: <T>(config: TreeConfig<T>) => _headless_tree_core.TreeInstance<T>;
+
+export { useTree };

package/dist/react17/index.d.ts

@@ -0,0 +1,6 @@
+import * as _headless_tree_core from '@headless-tree/core';
+import { TreeConfig } from '@headless-tree/core';
+
+declare const useTree: <T>(config: TreeConfig<T>) => _headless_tree_core.TreeInstance<T>;
+
+export { useTree };

package/dist/react17/index.js

@@ -0,0 +1,66 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react17/index.tsx
+var react17_exports = {};
+__export(react17_exports, {
+  useTree: () => useTree
+});
+module.exports = __toCommonJS(react17_exports);
+var import_react = require("react");
+var import_core = require("@headless-tree/core");
+var useTree = (config) => {
+  const [tree] = (0, import_react.useState)(() => ({ current: (0, import_core.createTree)(config) }));
+  const [state, setState] = (0, import_react.useState)(
+    () => tree.current.getState()
+  );
+  (0, import_react.useEffect)(() => {
+    tree.current.rebuildTree();
+  }, [tree]);
+  tree.current.setConfig((prev) => __spreadProps(__spreadValues(__spreadValues({}, prev), config), {
+    state: __spreadValues(__spreadValues({}, state), config.state),
+    setState: (state2) => {
+      var _a;
+      setState(state2);
+      (_a = config.setState) == null ? void 0 : _a.call(config, state2);
+    }
+  }));
+  return tree.current;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useTree
+});

package/dist/react17/index.mjs

@@ -0,0 +1,29 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-FWCSY2DS.mjs";
+
+// src/react17/index.tsx
+import { useEffect, useState } from "react";
+import { createTree } from "@headless-tree/core";
+var useTree = (config) => {
+  const [tree] = useState(() => ({ current: createTree(config) }));
+  const [state, setState] = useState(
+    () => tree.current.getState()
+  );
+  useEffect(() => {
+    tree.current.rebuildTree();
+  }, [tree]);
+  tree.current.setConfig((prev) => __spreadProps(__spreadValues(__spreadValues({}, prev), config), {
+    state: __spreadValues(__spreadValues({}, state), config.state),
+    setState: (state2) => {
+      var _a;
+      setState(state2);
+      (_a = config.setState) == null ? void 0 : _a.call(config, state2);
+    }
+  }));
+  return tree.current;
+};
+export {
+  useTree
+};

package/package.json

@@ -1,19 +1,36 @@
 {
   "name": "@headless-tree/react",
-  "version": "1.2.1",
-  "main": "lib/cjs/index.js",
-  "module": "lib/esm/index.js",
-  "types": "lib/esm/index.d.ts",
+  "version": "1.4.0",
+  "main": "dist/index.d.ts",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.mts",
   "exports": {
-    "types": "./lib/esm/index.d.ts",
-    "import": "./lib/esm/index.js",
-    "default": "./lib/cjs/index.js"
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.js",
+        "default": "./dist/index.d.ts"
+      }
+    },
+    "./react17": {
+      "import": {
+        "types": "./dist/react17/index.d.mts",
+        "default": "./dist/react17/index.mjs"
+      },
+      "require": {
+        "types": "./dist/react17/index.js",
+        "default": "./dist/react17/index.d.ts"
+      }
+    },
+    "./package.json": "./package.json"
   },
   "sideEffects": false,
   "scripts": {
-    "build:cjs": "tsc -m commonjs --outDir lib/cjs",
-    "build:esm": "tsc",
-    "start": "tsc -w"
+    "build": "tsup ./src/index.ts ./src/react17/index.tsx --format esm,cjs --dts",
+    "start": "tsup ./src/index.ts --format esm,cjs --dts --watch"
   },
   "repository": {
     "type": "git",
@@ -31,6 +48,7 @@
     "prop-types": "15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "tsup": "^8.5.0",
     "typescript": "^5.7.2"
   },
   "peerDependencies": {

package/src/react17/index.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import { TreeConfig, TreeState, createTree } from "@headless-tree/core";
+
+export const useTree = <T,>(config: TreeConfig<T>) => {
+  const [tree] = useState(() => ({ current: createTree(config) }));
+  const [state, setState] = useState<Partial<TreeState<T>>>(() =>
+    tree.current.getState(),
+  );
+
+  useEffect(() => {
+    tree.current.rebuildTree();
+  }, [tree]); // runs only once after mount
+
+  tree.current.setConfig((prev) => ({
+    ...prev,
+    ...config,
+    state: {
+      // ...prev.state,
+      ...state,
+      ...config.state,
+    },
+    setState: (state) => {
+      setState(state);
+      config.setState?.(state);
+    },
+  }));
+
+  return tree.current;
+};

package/src/use-tree.tsx

@@ -1,7 +1,34 @@
-import { useEffect, useInsertionEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { TreeConfig, TreeState, createTree } from "@headless-tree/core";
 
+/* A bug with NextJS was reported in the past where very quick state updates (i.e. data
+ * loader returning withing milliseconds) will cause the state update to occur before
+ * mount, resulting in a console warning. This alleviates this.
+ * We should monitor if this remains a problem in the future, maybe we can eventually
+ * remove this workaround...
+ */
+const useApplyAfterMount = () => {
+  const isMounted = useRef(false);
+  const callbacks = useRef<(() => void)[]>([]);
+
+  useEffect(() => {
+    isMounted.current = true;
+    callbacks.current.forEach((callback) => callback());
+  }, []);
+
+  const apply = (callback: () => void) => {
+    if (isMounted.current) {
+      callback();
+    } else {
+      callbacks.current.push(callback);
+    }
+  };
+
+  return apply;
+};
+
 export const useTree = <T,>(config: TreeConfig<T>) => {
+  const apply = useApplyAfterMount();
   const [tree] = useState(() => ({ current: createTree(config) }));
   const [state, setState] = useState<Partial<TreeState<T>>>(() =>
     tree.current.getState(),
@@ -11,21 +38,20 @@ export const useTree = <T,>(config: TreeConfig<T>) => {
     tree.current.rebuildTree();
   }, [tree]); // runs only once after mount
 
-  useInsertionEffect(() => {
-    tree.current.setConfig((prev) => ({
-      ...prev,
-      ...config,
-      state: {
-        // ...prev.state,
-        ...state,
-        ...config.state,
-      },
-      setState: (state) => {
+  tree.current.setConfig((prev) => ({
+    ...prev,
+    ...config,
+    state: {
+      ...state,
+      ...config.state,
+    },
+    setState: (state) => {
+      apply(() => {
         setState(state);
         config.setState?.(state);
-      },
-    }));
-  });
+      });
+    },
+  }));
 
   return tree.current;
 };

package/tsconfig.json

@@ -1,7 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["./src/**/*"],
-  "compilerOptions": {
-    "outDir": "lib/esm"
-  }
+  "include": ["./src/**/*"]
 }

package/lib/cjs/assistive-tree-description.d.ts

@@ -1,8 +0,0 @@
-import React, { HTMLProps } from "react";
-import { AssistiveDndState, DndState, HotkeysConfig, TreeInstance } from "@headless-tree/core";
-declare const getDefaultLabel: <T>(dnd: DndState<T> | null | undefined, assistiveState: AssistiveDndState, hotkeys: HotkeysConfig<T>) => string;
-export declare const AssistiveTreeDescription: <T>({ tree, getLabel, ...props }: {
-    tree: TreeInstance<T>;
-    getLabel?: typeof getDefaultLabel;
-} & HTMLProps<HTMLSpanElement>) => React.JSX.Element;
-export {};

package/lib/cjs/assistive-tree-description.js

@@ -1,63 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AssistiveTreeDescription = void 0;
-const react_1 = __importDefault(require("react"));
-const core_1 = require("@headless-tree/core");
-// https://medium.com/salesforce-ux/4-major-patterns-for-accessible-drag-and-drop-1d43f64ebf09
-const styles = {
-    position: "absolute",
-    margin: "-1px",
-    width: "1px",
-    height: "1px",
-    overflow: "hidden",
-    clip: "rect(0 0 0 0)",
-};
-const getDefaultLabel = (dnd, assistiveState, hotkeys) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    if (!hotkeys.startDrag)
-        return ""; // No hotkey feature configured
-    const itemNames = (_b = (_a = dnd === null || dnd === void 0 ? void 0 : dnd.draggedItems) === null || _a === void 0 ? void 0 : _a.map((item) => item.getItemName()).join(", ")) !== null && _b !== void 0 ? _b : "";
-    const position = !(dnd === null || dnd === void 0 ? void 0 : dnd.dragTarget)
-        ? "None"
-        : "childIndex" in dnd.dragTarget
-            ? `${dnd.dragTarget.childIndex} of ${dnd.dragTarget.item.getChildren().length} in ${dnd.dragTarget.item.getItemName()}`
-            : `in ${dnd.dragTarget.item.getItemName()}`;
-    const navGuide = `Press ${(_c = hotkeys.dragUp) === null || _c === void 0 ? void 0 : _c.hotkey} and ${(_d = hotkeys.dragDown) === null || _d === void 0 ? void 0 : _d.hotkey} to move up or down, ` +
-        `${(_e = hotkeys.completeDrag) === null || _e === void 0 ? void 0 : _e.hotkey} to drop, ${(_f = hotkeys.cancelDrag) === null || _f === void 0 ? void 0 : _f.hotkey} to abort.`;
-    switch (assistiveState) {
-        case core_1.AssistiveDndState.Started:
-            return itemNames
-                ? `Dragging ${itemNames}. Current position: ${position}. ${navGuide}`
-                : `Current position: ${position}. ${navGuide}`;
-        case core_1.AssistiveDndState.Dragging:
-            return itemNames ? `${itemNames}, ${position}` : position;
-        case core_1.AssistiveDndState.Completed:
-            return `Drag completed. Press ${(_g = hotkeys.startDrag) === null || _g === void 0 ? void 0 : _g.hotkey} to move selected items`;
-        case core_1.AssistiveDndState.Aborted:
-            return `Drag cancelled. Press ${(_h = hotkeys.startDrag) === null || _h === void 0 ? void 0 : _h.hotkey} to move selected items`;
-        case core_1.AssistiveDndState.None:
-        default:
-            return `Press ${(_j = hotkeys.startDrag) === null || _j === void 0 ? void 0 : _j.hotkey} to move selected items`;
-    }
-};
-const AssistiveTreeDescription = (_a) => {
-    var _b;
-    var { tree, getLabel = getDefaultLabel } = _a, props = __rest(_a, ["tree", "getLabel"]);
-    const state = tree.getState();
-    return (react_1.default.createElement("span", Object.assign({ "aria-live": "assertive" }, props, { style: Object.assign(Object.assign({}, styles), props.style) }), getLabel(state.dnd, (_b = state.assistiveDndState) !== null && _b !== void 0 ? _b : core_1.AssistiveDndState.None, tree.getHotkeyPresets())));
-};
-exports.AssistiveTreeDescription = AssistiveTreeDescription;

package/lib/cjs/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./assistive-tree-description";
-export * from "./use-tree";

package/lib/cjs/index.js

@@ -1,18 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./assistive-tree-description"), exports);
-__exportStar(require("./use-tree"), exports);

package/lib/cjs/use-tree.d.ts

@@ -1,2 +0,0 @@
-import { TreeConfig } from "@headless-tree/core";
-export declare const useTree: <T>(config: TreeConfig<T>) => import("@headless-tree/core").TreeInstance<T>;

package/lib/cjs/use-tree.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTree = void 0;
-const react_1 = require("react");
-const core_1 = require("@headless-tree/core");
-const useTree = (config) => {
-    const [tree] = (0, react_1.useState)(() => ({ current: (0, core_1.createTree)(config) }));
-    const [state, setState] = (0, react_1.useState)(() => tree.current.getState());
-    (0, react_1.useEffect)(() => {
-        tree.current.rebuildTree();
-    }, [tree]); // runs only once after mount
-    (0, react_1.useInsertionEffect)(() => {
-        tree.current.setConfig((prev) => (Object.assign(Object.assign(Object.assign({}, prev), config), { state: Object.assign(Object.assign({}, state), config.state), setState: (state) => {
-                var _a;
-                setState(state);
-                (_a = config.setState) === null || _a === void 0 ? void 0 : _a.call(config, state);
-            } })));
-    });
-    return tree.current;
-};
-exports.useTree = useTree;

package/lib/esm/assistive-tree-description.d.ts

@@ -1,8 +0,0 @@
-import React, { HTMLProps } from "react";
-import { AssistiveDndState, DndState, HotkeysConfig, TreeInstance } from "@headless-tree/core";
-declare const getDefaultLabel: <T>(dnd: DndState<T> | null | undefined, assistiveState: AssistiveDndState, hotkeys: HotkeysConfig<T>) => string;
-export declare const AssistiveTreeDescription: <T>({ tree, getLabel, ...props }: {
-    tree: TreeInstance<T>;
-    getLabel?: typeof getDefaultLabel;
-} & HTMLProps<HTMLSpanElement>) => React.JSX.Element;
-export {};

package/lib/esm/assistive-tree-description.js

@@ -1,56 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React from "react";
-import { AssistiveDndState, } from "@headless-tree/core";
-// https://medium.com/salesforce-ux/4-major-patterns-for-accessible-drag-and-drop-1d43f64ebf09
-const styles = {
-    position: "absolute",
-    margin: "-1px",
-    width: "1px",
-    height: "1px",
-    overflow: "hidden",
-    clip: "rect(0 0 0 0)",
-};
-const getDefaultLabel = (dnd, assistiveState, hotkeys) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    if (!hotkeys.startDrag)
-        return ""; // No hotkey feature configured
-    const itemNames = (_b = (_a = dnd === null || dnd === void 0 ? void 0 : dnd.draggedItems) === null || _a === void 0 ? void 0 : _a.map((item) => item.getItemName()).join(", ")) !== null && _b !== void 0 ? _b : "";
-    const position = !(dnd === null || dnd === void 0 ? void 0 : dnd.dragTarget)
-        ? "None"
-        : "childIndex" in dnd.dragTarget
-            ? `${dnd.dragTarget.childIndex} of ${dnd.dragTarget.item.getChildren().length} in ${dnd.dragTarget.item.getItemName()}`
-            : `in ${dnd.dragTarget.item.getItemName()}`;
-    const navGuide = `Press ${(_c = hotkeys.dragUp) === null || _c === void 0 ? void 0 : _c.hotkey} and ${(_d = hotkeys.dragDown) === null || _d === void 0 ? void 0 : _d.hotkey} to move up or down, ` +
-        `${(_e = hotkeys.completeDrag) === null || _e === void 0 ? void 0 : _e.hotkey} to drop, ${(_f = hotkeys.cancelDrag) === null || _f === void 0 ? void 0 : _f.hotkey} to abort.`;
-    switch (assistiveState) {
-        case AssistiveDndState.Started:
-            return itemNames
-                ? `Dragging ${itemNames}. Current position: ${position}. ${navGuide}`
-                : `Current position: ${position}. ${navGuide}`;
-        case AssistiveDndState.Dragging:
-            return itemNames ? `${itemNames}, ${position}` : position;
-        case AssistiveDndState.Completed:
-            return `Drag completed. Press ${(_g = hotkeys.startDrag) === null || _g === void 0 ? void 0 : _g.hotkey} to move selected items`;
-        case AssistiveDndState.Aborted:
-            return `Drag cancelled. Press ${(_h = hotkeys.startDrag) === null || _h === void 0 ? void 0 : _h.hotkey} to move selected items`;
-        case AssistiveDndState.None:
-        default:
-            return `Press ${(_j = hotkeys.startDrag) === null || _j === void 0 ? void 0 : _j.hotkey} to move selected items`;
-    }
-};
-export const AssistiveTreeDescription = (_a) => {
-    var _b;
-    var { tree, getLabel = getDefaultLabel } = _a, props = __rest(_a, ["tree", "getLabel"]);
-    const state = tree.getState();
-    return (React.createElement("span", Object.assign({ "aria-live": "assertive" }, props, { style: Object.assign(Object.assign({}, styles), props.style) }), getLabel(state.dnd, (_b = state.assistiveDndState) !== null && _b !== void 0 ? _b : AssistiveDndState.None, tree.getHotkeyPresets())));
-};

package/lib/esm/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./assistive-tree-description";
-export * from "./use-tree";

package/lib/esm/index.js

@@ -1,2 +0,0 @@
-export * from "./assistive-tree-description";
-export * from "./use-tree";

package/lib/esm/use-tree.d.ts

@@ -1,2 +0,0 @@
-import { TreeConfig } from "@headless-tree/core";
-export declare const useTree: <T>(config: TreeConfig<T>) => import("@headless-tree/core").TreeInstance<T>;

package/lib/esm/use-tree.js

@@ -1,17 +0,0 @@
-import { useEffect, useInsertionEffect, useState } from "react";
-import { createTree } from "@headless-tree/core";
-export const useTree = (config) => {
-    const [tree] = useState(() => ({ current: createTree(config) }));
-    const [state, setState] = useState(() => tree.current.getState());
-    useEffect(() => {
-        tree.current.rebuildTree();
-    }, [tree]); // runs only once after mount
-    useInsertionEffect(() => {
-        tree.current.setConfig((prev) => (Object.assign(Object.assign(Object.assign({}, prev), config), { state: Object.assign(Object.assign({}, state), config.state), setState: (state) => {
-                var _a;
-                setState(state);
-                (_a = config.setState) === null || _a === void 0 ? void 0 : _a.call(config, state);
-            } })));
-    });
-    return tree.current;
-};