@headless-tree/react 1.3.0 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @headless-tree/react
 
+## 1.5.0
+
+### Minor Changes
+
+- cbeaba6: all state updates (like setSelectedItems) will not propagate while the component is unmounted. This happened before for `tree.setState()` calls directly, but not individual state atoms like `setSelectedItems`. When calling `createTree()` directly (instead of `useTree()`), `tree.setMounted(true)` needs to be called once after mount. No changes are necessary when using the React-based `useTree()` integration. (#158)
+
+### Patch Changes
+
+- 72e714b: all NPM deployments will now publish with provenance
+- 7a7424f: fixed incorrect exports definition in package.json for require/cjs imports (#161)
+
+## 1.4.0
+
 ## 1.3.0
 
 ### Patch Changes

package/dist/index.js

@@ -129,18 +129,20 @@ var useTree = (config) => {
     () => tree.current.getState()
   );
   (0, import_react2.useEffect)(() => {
+    tree.current.setMounted(true);
     tree.current.rebuildTree();
+    return () => {
+      tree.current.setMounted(false);
+    };
   }, [tree]);
-  (0, import_react2.useInsertionEffect)(() => {
-    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);
-      }
-    }));
-  });
+  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:

package/dist/index.mjs

@@ -63,7 +63,7 @@ var AssistiveTreeDescription = (_a) => {
 };
 
 // src/use-tree.tsx
-import { useEffect, useInsertionEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { createTree } from "@headless-tree/core";
 var useTree = (config) => {
   const [tree] = useState(() => ({ current: createTree(config) }));
@@ -71,18 +71,20 @@ var useTree = (config) => {
     () => tree.current.getState()
   );
   useEffect(() => {
+    tree.current.setMounted(true);
     tree.current.rebuildTree();
+    return () => {
+      tree.current.setMounted(false);
+    };
   }, [tree]);
-  useInsertionEffect(() => {
-    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);
-      }
-    }));
-  });
+  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 {

package/package.json

@@ -1,6 +1,19 @@
 {
   "name": "@headless-tree/react",
-  "version": "1.3.0",
+  "description": "The definitive tree component for the Web",
+  "keywords": [
+    "tree",
+    "component",
+    "web",
+    "headless",
+    "ui",
+    "react",
+    "nested",
+    "async",
+    "checkbox",
+    "hook"
+  ],
+  "version": "1.5.0",
   "main": "dist/index.d.ts",
   "module": "dist/index.mjs",
   "types": "dist/index.d.mts",
@@ -11,8 +24,8 @@
         "default": "./dist/index.mjs"
       },
       "require": {
-        "types": "./dist/index.js",
-        "default": "./dist/index.d.ts"
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
       }
     },
     "./react17": {
@@ -21,13 +34,16 @@
         "default": "./dist/react17/index.mjs"
       },
       "require": {
-        "types": "./dist/react17/index.js",
-        "default": "./dist/react17/index.d.ts"
+        "types": "./dist/react17/index.d.ts",
+        "default": "./dist/react17/index.js"
       }
     },
     "./package.json": "./package.json"
   },
   "sideEffects": false,
+  "publishConfig": {
+    "provenance": true
+  },
   "scripts": {
     "build": "tsup ./src/index.ts ./src/react17/index.tsx --format esm,cjs --dts",
     "start": "tsup ./src/index.ts --format esm,cjs --dts --watch"

package/readme.md

@@ -2,14 +2,14 @@
 
 [![Documentation](https://img.shields.io/badge/docs-1e1f22?style=flat)](https://headless-tree.lukasbach.com/)
 [![Chat on Discord](https://img.shields.io/badge/discord-4c57d9?style=flat&logo=discord&logoColor=ffffff)](https://discord.gg/KuZ6EezzVw)
-[![Follow on BLuesky](https://img.shields.io/badge/bluesky-0285FF?style=flat&logo=bluesky&logoColor=ffffff)](https://bsky.app/profile/lukasbach.bsky.social)
+[![Follow on Bluesky](https://img.shields.io/badge/bluesky-0285FF?style=flat&logo=bluesky&logoColor=ffffff)](https://bsky.app/profile/lukasbach.bsky.social)
+[![Follow on X](https://img.shields.io/badge/x-000000?style=flat&logo=x&logoColor=ffffff)](https://x.com/lukasmbach)
 [![Support on Github Sponsors](https://img.shields.io/badge/sponsor-EA4AAA?style=flat&logo=githubsponsors&logoColor=ffffff)](https://github.com/sponsors/lukasbach)
 [![Follow on Github](https://img.shields.io/badge/follow-181717?style=flat&logo=github&logoColor=ffffff)](https://github.com/lukasbach)
 [![NPM Core package](https://img.shields.io/badge/core-CB3837?style=flat&logo=npm&logoColor=ffffff)](https://www.npmjs.com/package/@headless-tree/core)
 [![NPM React package](https://img.shields.io/badge/react-CB3837?style=flat&logo=npm&logoColor=ffffff)](https://www.npmjs.com/package/@headless-tree/react)
 
-
-Super-easy integration of complex tree components into React. Supports ordered 
+Super-easy integration of complex tree components into React. Supports ordered
 and unordered drag-and-drop, extensive keybindings, search, renaming and more.
 Fully customizable and accessible. Headless Tree is the official successor for
 [react-complex-tree](https://github.com/lukasbach/react-complex-tree).
@@ -18,7 +18,7 @@ It aims to bring the many features of complex tree views, like multi-select,
 drag-and-drop, keyboard navigation, tree search, renaming and more, while
 being unopinionated about the styling and rendering of the tree itself.
 Accessibility is ensured by default, and the integration is extremely
-simple and flexible. 
+simple and flexible.
 
 The interface gives you a flat list of tree nodes
 that you can easily render yourself, which keeps the complexity of the
@@ -39,7 +39,7 @@ to get an idea of what you can do with it.
 > I have collected feedback and fixed any bugs that might arise. I've written
 > [a blog post](https://medium.com/@lukasbach/headless-tree-and-the-future-of-react-complex-tree-fc920700e82a)
 > about the details of the change, and the future of the library.
-> 
+>
 > Join
 > [the Discord](https://discord.gg/KuZ6EezzVw) to get involved, and
 > [follow on Bluesky](https://bsky.app/profile/lukasbach.bsky.social) to
@@ -154,4 +154,4 @@ Then, render your tree based on the tree instance returned from the hook:
 ```
 
 Read on in the [get started guide](https://headless-tree.lukasbach.com/getstarted) to learn more about
-how to use Headless Tree, and how to customize it to your needs.
+how to use Headless Tree, and how to customize it to your needs.

package/src/use-tree.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useInsertionEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { TreeConfig, TreeState, createTree } from "@headless-tree/core";
 
 export const useTree = <T,>(config: TreeConfig<T>) => {
@@ -8,24 +8,26 @@ export const useTree = <T,>(config: TreeConfig<T>) => {
   );
 
   useEffect(() => {
+    (tree.current as any).setMounted(true);
     tree.current.rebuildTree();
-  }, [tree]); // runs only once after mount
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      (tree.current as any).setMounted(false);
+    };
+  }, [tree]);
 
-  useInsertionEffect(() => {
-    tree.current.setConfig((prev) => ({
-      ...prev,
-      ...config,
-      state: {
-        // ...prev.state,
-        ...state,
-        ...config.state,
-      },
-      setState: (state) => {
-        setState(state);
-        config.setState?.(state);
-      },
-    }));
-  });
+  tree.current.setConfig((prev) => ({
+    ...prev,
+    ...config,
+    state: {
+      ...state,
+      ...config.state,
+    },
+    setState: (state) => {
+      setState(state);
+      config.setState?.(state);
+    },
+  }));
 
   return tree.current;
 };