Make new collection nodes start opened up

Author: CarlosNZ

README.md

@@ -584,7 +584,7 @@ This component is heavily inspired by [react-json-view](https://github.com/mac-s
 
 ## Changelog
 
-- **1.11.1**: Bug fix for invalid state when changing type to Collection node
+- **1.11.3**: Bug fix for invalid state when changing type to Collection node
 - **1.11.0**:
   - Improve CSS definitions to prevent properties from being overridden by the host environment's CSS
   - Add `rootFontSize` prop to set the "base" size for the component

src/CollectionNode.tsx

@@ -84,7 +84,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = ({
   useEffect(() => {
     if (collapseState !== null && doesPathMatch(path)) {
       hasBeenOpened.current = true
-      setCollapsed(collapseState.open)
+      setCollapsed(collapseState.collapsed)
     }
   }, [collapseState])
 
@@ -134,7 +134,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = ({
   const handleCollapse = (e: React.MouseEvent) => {
     if (e.getModifierState('Alt')) {
       hasBeenOpened.current = true
-      setCollapseState({ open: !collapsed, path })
+      setCollapseState({ collapsed: !collapsed, path })
       return
     }
     if (!(currentlyEditingElement && currentlyEditingElement.includes(pathString))) {

src/TreeStateProvider.tsx

@@ -8,7 +8,7 @@ import { type CollectionKey } from './types'
 
 interface CollapseAllState {
   path: CollectionKey[]
-  open: boolean
+  collapsed: boolean
 }
 interface TreeStateContext {
   collapseState: CollapseAllState | null

src/ValueNodeWrapper.tsx

@@ -49,7 +49,7 @@ export const ValueNodeWrapper: React.FC<ValueNodeProps> = (props) => {
     customNodeDefinitions,
   } = props
   const { getStyles } = useTheme()
-  const { currentlyEditingElement, setCurrentlyEditingElement } = useTreeState()
+  const { currentlyEditingElement, setCurrentlyEditingElement, setCollapseState } = useTreeState()
   const [value, setValue] = useState<typeof data | CollectionData>(
     // Bad things happen when you put a function into useState
     typeof data === 'function' ? INVALID_FUNCTION_STRING : data
@@ -140,6 +140,7 @@ export const ValueNodeWrapper: React.FC<ValueNodeProps> = (props) => {
       updateValue(newValue as ValueData)
       onEdit(newValue, path)
       setCurrentlyEditingElement(null)
+      setCollapseState({ path, collapsed: false })
       setDataType(type)
     }
   }