Squashed commit of the following:

commit 497f451
Author: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date:   Wed Jul 24 15:50:54 2024 +1200

    Tweaks

commit 747a5ec
Author: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date:   Wed Jul 24 15:46:52 2024 +1200

    Tidy up

commit 104b2b6
Author: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date:   Wed Jul 24 10:56:37 2024 +1200

    Consolidate into working hook

commit b989b20
Merge: bad373b 138ae5d
Author: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date:   Wed Jul 24 08:45:34 2024 +1200

    Merge branch 'main' into 96B-refactor-animation

commit bad373b
Author: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date:   Tue Jul 23 23:10:05 2024 +1200

    WIP

commit 2eb4311
Author: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date:   Tue Jul 23 22:18:05 2024 +1200

    WIP

Author: CarlosNZ

README.md

@@ -112,7 +112,7 @@ The only *required* value is `data` (although you will need to provide a `setDat
 | `enableClipboard`       | `boolean\|CopyFunction`                       | `true`                                    | Whether or not to enable the "Copy to clipboard" button in the UI. If a function is provided, `true` is assumed and this function will be run whenever an item is copied.                                                                                                                                                                      |
 | `indent`                | `number`                                      | `3`                                       | Specify the amount of indentation for each level of nesting in the displayed data.                                                                                                                                                                                                                                                             |
 | `collapse`              | `boolean\|number\|FilterFunction`             | `false`                                   | Defines which nodes of the JSON tree will be displayed "opened" in the UI on load. If `boolean`, it'll be either all or none. A `number` specifies a nesting depth after which nodes will be closed. For more fine control a function can be provided — see [Filter functions](#filter-functions).                                             |
-| `collapseAnimationTime` | `number`                                      | `500`                                     | Time (in milliseconds) for the transition animation when collapsing collection nodes.                                                                                                                                                                                                                                                          |
+| `collapseAnimationTime` | `number`                                      | `300`                                     | Time (in milliseconds) for the transition animation when collapsing collection nodes.                                                                                                                                                                                                                                                          |
 | `restrictEdit`          | `boolean\|FilterFunction`                     | `false`                                   | If `true`, no editing is permitted. A function can be provided for more specificity — see [Filter functions](#filter-functions)                                                                                                                                                                                                                |
 | `restrictDelete`        | `boolean\|FilterFunction`                     | `false`                                   | As with `restrictEdit` but for deletion                                                                                                                                                                                                                                                                                                        |
 | `restrictAdd`           | `boolean\|FilterFunction`                     | `false`                                   | As with `restrictEdit` but for adding new properties                                                                                                                                                                                                                                                                                           |

demo/src/App.tsx

@@ -76,7 +76,7 @@ function App() {
     rootName: dataDefinition.rootName ?? 'data',
     indent: 3,
     collapseLevel: dataDefinition.collapse ?? 2,
-    collapseTime: 500,
+    collapseTime: 300,
     showCount: 'When closed',
     theme: 'default',
     allowEdit: true,

demo/src/_imports.ts

@@ -3,10 +3,10 @@
  */
 
 /* Installed package */
-export * from 'json-edit-react'
+// export * from 'json-edit-react'
 
 /* Local src */
-// export * from './json-edit-react/src'
+export * from './json-edit-react/src'
 
 /* Compiled local package */
 // export * from './package/build'

src/CollectionNode.tsx

@@ -10,7 +10,7 @@ import './style.css'
 import { AutogrowTextArea } from './AutogrowTextArea'
 import { useTheme } from './theme'
 import { useTreeState } from './TreeStateProvider'
-import { useCommon, useDragNDrop } from './hooks'
+import { useCollapseTransition, useCommon, useDragNDrop } from './hooks'
 
 export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
   const { getStyles } = useTheme()
@@ -49,7 +49,12 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
   const [stringifiedValue, setStringifiedValue] = useState(jsonStringify(data))
 
   const startCollapsed = collapseFilter(incomingNodeData)
-  const [collapsed, setCollapsed] = useState(startCollapsed)
+
+  const { contentRef, isAnimating, maxHeight, collapsed, animateCollapse } = useCollapseTransition(
+    data,
+    collapseAnimationTime,
+    startCollapsed
+  )
 
   const {
     pathString,
@@ -77,24 +82,20 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
   // the animation transition when opening and closing the accordion
   const hasBeenOpened = useRef(!startCollapsed)
 
-  // Allows us to delay the overflow visibility of the collapsed element until
-  // the animation has completed
-  const [isAnimating, setIsAnimating] = useState(false)
-
   useEffect(() => {
     setStringifiedValue(jsonStringify(data))
   }, [data])
 
   useEffect(() => {
-    const isCollapsed = collapseFilter(nodeData) && !derivedValues.isEditing
-    hasBeenOpened.current = !isCollapsed
-    setCollapsed(isCollapsed)
+    const shouldBeCollapsed = collapseFilter(nodeData) && !derivedValues.isEditing
+    hasBeenOpened.current = !shouldBeCollapsed
+    animateCollapse(shouldBeCollapsed)
   }, [collapseFilter])
 
   useEffect(() => {
     if (collapseState !== null && doesPathMatch(path)) {
       hasBeenOpened.current = true
-      setCollapsed(collapseState.collapsed)
+      animateCollapse(collapseState.collapsed)
     }
   }, [collapseState])
 
@@ -126,10 +127,6 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
   const brackets =
     collectionType === 'array' ? { open: '[', close: ']' } : { open: '{', close: '}' }
 
-  const transitionTime = getComputedStyle(document.documentElement).getPropertyValue(
-    '--jer-expand-transition-time'
-  )
-
   const handleKeyPress = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && (e.metaKey || e.shiftKey || e.ctrlKey)) handleEdit()
     else if (e.key === 'Escape') handleCancel()
@@ -142,11 +139,9 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
       return
     }
     if (!(currentlyEditingElement && currentlyEditingElement.includes(pathString))) {
-      setIsAnimating(true)
       hasBeenOpened.current = true
-      setCollapsed(!collapsed)
       setCollapseState(null)
-      setTimeout(() => setIsAnimating(false), collapseAnimationTime)
+      animateCollapse(!collapsed)
     }
   }
 
@@ -175,7 +170,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
   }
 
   const handleAdd = (key: string) => {
-    setCollapsed(false)
+    animateCollapse(false)
     const newValue = getDefaultNewValue(nodeData)
     if (collectionType === 'array') {
       onAdd(newValue, [...path, (data as unknown[]).length]).then((error) => {
@@ -231,12 +226,6 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
     )
   }
 
-  // A crude measure to estimate the approximate height of the block, for
-  // setting the max-height in the collapsible interior.
-  // The Regexp replacement is to parse escaped line breaks *within* the JSON
-  // into *actual* line breaks before splitting
-  const numOfLines = JSON.stringify(data, null, 2).replace(/\\n/g, '\n').split('\n').length
-
   const CollectionChildren = !hasBeenOpened.current ? null : !isEditing ? (
     keyValueArray.map(([key, value], index) => {
       const childNodeData = {
@@ -365,7 +354,6 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
           ? () => {
               hasBeenOpened.current = true
               setCurrentlyEditingElement(pathString)
-              setCollapsed(false)
             }
           : undefined
       }
@@ -437,21 +425,12 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
       <div
         className={'jer-collection-inner'}
         style={{
-          // Don't limit the height when collection or any of its children are
-          // being edited, so it won't overlap lower elements if the editing
-          // input gets too large. This won't cause problems, as it can't be
-          // collapsed while being edited anyway.
-          maxHeight: isCollapsed
-            ? 0
-            : !areChildrenBeingEdited(pathString)
-            ? `${numOfLines * 3}em`
-            : undefined,
           overflowY: isCollapsed || isAnimating ? 'hidden' : 'visible',
-          // Need to use max-height for animation to work, unfortunately
-          // "height: auto" doesn't 😔
-          transition: `max-height ${transitionTime}`,
+          // Prevent collapse if this node or any children are being edited
+          maxHeight: areChildrenBeingEdited(pathString) ? undefined : maxHeight,
           ...getStyles('collectionInner', nodeData),
         }}
+        ref={contentRef}
       >
         {CollectionContents}
         <div className={isEditing ? 'jer-collection-error-row' : 'jer-collection-error-row-edit'}>

src/JsonEditor.tsx

@@ -37,7 +37,7 @@ const Editor: React.FC<JsonEditorProps> = ({
   enableClipboard = true,
   indent = 3,
   collapse = false,
-  collapseAnimationTime = 500,
+  collapseAnimationTime = 300, // must be equivalent to CSS value
   showCollectionCount = true,
   restrictEdit = false,
   restrictDelete = false,

src/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './useCommon'
 export * from './useData'
 export * from './useDragNDrop'
+export * from './useCollapseTransition'

src/hooks/useCollapseTransition.ts

@@ -0,0 +1,128 @@
+/**
+ * Hook to handle the logic for collapsing and expanding collection nodes, and
+ * holding the current collapsed state of a collection node
+ *
+ * The main problem we need to solve is that it's not possible to use a CSS
+ * transition for `height` when it is set to `auto`, which it needs to be in
+ * this case as we don't know the state or size of the inner nodes.
+ *
+ * We can, however, set a `max-height` and, as long as the maximum is larger
+ * than the actual height, we can transition `max-height`, a technique which is
+ * summarised here:
+ * https://dev.to/sarah_chima/using-css-transitions-on-the-height-property-al0
+ *
+ * The difficulty is choosing an appropriate value for the `max-height` -- if
+ * it's too small, the node contents gets truncated, but if it's too large,
+ * there is a noticeable "lag" as the invisible "unused" part of the height is
+ * collapsed. Just setting a really high value works, but the delay is annoying.
+ *
+ * So we can try and get the `max-height` from the height of the node itself.
+ * This is easy once the node has been opened -- just query the element height
+ * (using a ref). But if the node hasn't been opened, then we have to estimate
+ * it. I'm doing this with fairly crude method based on the number of text lines
+ * the full content of the node would take up. This is adequate in almost all
+ * cases, although I'm open to refining this further.
+ *
+ * Basically, the logic is:
+ *
+ * On first load:
+ * - if closed, set max-height to 0
+ * - if open, set no max-height (undefined) and let it automatically resize
+ *
+ * When collapsing an open node:
+ * - store the current height in "prevHeight"
+ * - set the max-height to the current height
+ * - immediately after, set max-height to 0 and transition will occur
+ *
+ * When opening a closed node:
+ * - set max-height to the previously stored height if available; otherwise use
+ *   the crudely calculated estimate.
+ * - once transition is complete, unset `max-height` (undefined) so it can
+ *   change height automatically based on its changing contents
+ */
+
+import { useRef, useState } from 'react'
+import { type JsonData } from '../types'
+
+export const useCollapseTransition = (
+  data: JsonData,
+  collapseAnimationTime: number,
+  startCollapsed: boolean
+) => {
+  const [maxHeight, setMaxHeight] = useState<string | number | undefined>(
+    startCollapsed ? 0 : undefined
+  )
+  const [collapsed, setCollapsed] = useState<boolean>(startCollapsed)
+
+  // Allows us to wait for animation to complete before setting the overflow
+  // visibility of the collapsed node, and the max-height
+  const isAnimating = useRef(false)
+  const contentRef = useRef<HTMLDivElement>(null)
+  const prevHeight = useRef<string | number>(0)
+  const timerId = useRef<number>()
+
+  // Method to change the collapse state and manage the animated transition
+  const animateCollapse = (collapse: boolean) => {
+    if (collapsed === collapse) return
+
+    window.clearTimeout(timerId.current)
+    isAnimating.current = true
+
+    switch (collapse) {
+      case true: {
+        // Closing...
+        const current = contentRef.current?.offsetHeight ?? 0
+        prevHeight.current = current
+        setMaxHeight(current)
+        setTimeout(() => {
+          setMaxHeight(0)
+        }, 5)
+        break
+      }
+      case false:
+        // Opening...
+        setMaxHeight(prevHeight.current || estimateHeight(data, contentRef))
+    }
+
+    setCollapsed(!collapsed)
+    timerId.current = window.setTimeout(() => {
+      isAnimating.current = false
+      if (!collapse) setMaxHeight(undefined)
+    }, collapseAnimationTime)
+  }
+
+  return {
+    contentRef,
+    isAnimating,
+    animateCollapse,
+    maxHeight,
+    collapsed,
+  }
+}
+
+// A crude measure to estimate the approximate height of the block before it has
+// been opened. Essentially, it estimates how many lines of text the full JSON
+// would take up, and converts that to a pixel value based on the current
+// fontSize
+const estimateHeight = (data: JsonData, ref: React.RefObject<HTMLDivElement>) => {
+  const component = document.getElementsByClassName('jer-editor-container')
+  const baseFontSize = parseInt(
+    component.length > 0 ? getComputedStyle(component[0]).getPropertyValue('line-height') : '16px'
+  )
+
+  const width = ref.current?.offsetWidth ?? 0
+  const charsPerLine = width / (baseFontSize * 0.5)
+
+  const lines = JSON.stringify(data, null, 2)
+    // The Regexp replacement is to parse escaped line breaks
+    // *within* the JSON into *actual* line breaks before splitting
+    .replace(/\\n/g, '\n')
+    .split('\n')
+    // Account for long lines being wrapped (very crudely)
+    .map((line) => Math.ceil(line.length / charsPerLine))
+
+  const totalLines = lines.reduce((sum, a) => sum + a, 0)
+  const linesInPx = totalLines * baseFontSize
+
+  return Math.min(linesInPx + 30, window.innerHeight - 50)
+}

src/style.css

@@ -4,7 +4,7 @@
   --jer-select-arrow: #777;
   --jer-form-border: 1px solid #ededf0;
   --jer-form-border-focus: 1px solid #e2e2e2;
-  --jer-expand-transition-time: 0.5s;
+  --jer-expand-transition-time: 0.3s;
   --jer-highlight-color: #b3d8ff;
 }
 
@@ -158,6 +158,7 @@ select:focus + .focus {
 
 .jer-collection-inner {
   position: relative;
+  transition: var(--jer-expand-transition-time);
 }
 
 .jer-collection-text-edit {