@sanity/hierarchical-document-list 2.0.1 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/hierarchical-document-list",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Sanity Plugin - Hierarchical Document List",
   "keywords": [
     "sanity",
@@ -54,8 +54,8 @@
     "@sanity/mutator": "^3.78.1",
     "@sanity/ui": "^2.15.2",
     "@sanity/util": "^3.78.1",
-    "react-dnd": "16.0.1",
-    "react-dnd-html5-backend": "16.0.1"
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.4.3",
@@ -64,7 +64,7 @@
     "@sanity/plugin-kit": "^3.1.10",
     "@sanity/semantic-release-preset": "^4.1.6",
     "@sanity/vision": "^3.78.1",
-    "@types/react": "^18.2.41",
+    "@types/react": "^19.0.10",
     "@typescript-eslint/eslint-plugin": "^6.13.1",
     "@typescript-eslint/parser": "^6.13.1",
     "eslint": "^8.55.0",
@@ -78,18 +78,23 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^3.1.0",
     "prettier-plugin-packagejson": "^2.4.7",
-    "react": "^18.3.0",
-    "react-dom": "^18.3.0",
-    "react-is": "^18.3.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-is": "^19.0.0",
     "rimraf": "^5.0.5",
     "sanity": "^3.78.1",
     "styled-components": "^6.1.15",
     "typescript": "5.3.2"
   },
   "peerDependencies": {
-    "react": "^18.3",
+    "react": "^18.3 || ^19",
     "sanity": "^3"
   },
+  "overrides": {
+    "react": "$react",
+    "react-dom": "$react-dom",
+    "react-is": "$react-is"
+  },
   "engines": {
     "node": ">=14"
   }

package/src/components/TreeEditor.tsx

@@ -42,6 +42,13 @@ const TreeEditor: React.FC<{
   })
 
   const [context, setContext] = React.useState<HTMLElement | null>(null)
+  const [treeViewHeight, setTreeViewHeight] = React.useState<string>('')
+
+  const updateTreeViewHeight = () => {
+    const el = document.querySelector(`#${props.options.documentId} [data-known-size]`) as HTMLElement | null
+    const rowHeight = Number(el?.dataset.knownSize || 51)
+    setTreeViewHeight(getTreeHeight(localTree, rowHeight))
+  }
 
   React.useEffect(() => {
     if (props.options.documentId) {
@@ -49,6 +56,16 @@ const TreeEditor: React.FC<{
     }
   }, [props.options.documentId])
 
+  React.useEffect(() => {
+    // Wait for dom to load before initial execution.
+    setTimeout(updateTreeViewHeight)
+  }, [])
+
+  React.useEffect(() => {
+    // Immediately update when changes are detected.
+    updateTreeViewHeight()
+  }, [props.options.documentId, localTree])
+
   const onMoveNode = useCallback(
     (data: NodeData & FullTree & any) =>
       operations.handleMovedNode(data as unknown as HandleMovedNodeData),
@@ -79,7 +96,7 @@ const TreeEditor: React.FC<{
             <TreeOperationsContext.Provider value={operationContext}>
               <Stack space={4} paddingTop={4}>
                 <Card
-                  style={{minHeight: getTreeHeight(localTree)}}
+                  style={{minHeight: treeViewHeight}}
                   // Only include borderBottom if there's something to show in unadded items
                   borderBottom={allItemsStatus !== 'success' || unAddedItems?.length > 0}
                 >

package/src/utils/getTreeHeight.ts

@@ -1,10 +1,8 @@
 import {getVisibleNodeCount, TreeItem} from '@nosferatu500/react-sortable-tree'
 
-export const ROW_HEIGHT = 51
-
-export default function getTreeHeight(treeData: TreeItem[]): string {
+export default function getTreeHeight(treeData: TreeItem[], rowHeight: number): string {
   const visibleNodeCount = getVisibleNodeCount({treeData})
 
   // prettier-ignore
-  return `${50 + (ROW_HEIGHT * visibleNodeCount)}px`
+  return `${50 + (rowHeight * visibleNodeCount)}px`
 }