@headless-tree/react 1.4.0 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @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

package/dist/index.js

@@ -123,39 +123,24 @@ var AssistiveTreeDescription = (_a) => {
 // 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.setMounted(true);
     tree.current.rebuildTree();
+    return () => {
+      tree.current.setMounted(false);
+    };
   }, [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);
-      });
+      var _a;
+      setState(state2);
+      (_a = config.setState) == null ? void 0 : _a.call(config, state2);
     }
   }));
   return tree.current;

package/dist/index.mjs

@@ -63,41 +63,26 @@ var AssistiveTreeDescription = (_a) => {
 };
 
 // src/use-tree.tsx
-import { useEffect, useRef, useState } from "react";
+import { useEffect, 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.setMounted(true);
     tree.current.rebuildTree();
+    return () => {
+      tree.current.setMounted(false);
+    };
   }, [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);
-      });
+      var _a;
+      setState(state2);
+      (_a = config.setState) == null ? void 0 : _a.call(config, state2);
     }
   }));
   return tree.current;

package/package.json

@@ -1,6 +1,19 @@
 {
   "name": "@headless-tree/react",
-  "version": "1.4.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,42 +1,20 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, 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(),
   );
 
   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]);
 
   tree.current.setConfig((prev) => ({
     ...prev,
@@ -46,10 +24,8 @@ export const useTree = <T,>(config: TreeConfig<T>) => {
       ...config.state,
     },
     setState: (state) => {
-      apply(() => {
-        setState(state);
-        config.setState?.(state);
-      });
+      setState(state);
+      config.setState?.(state);
     },
   }));