WIP

Author: CarlosNZ

demo/src/App.tsx

@@ -330,6 +330,7 @@ function App() {
               }
               showErrorMessages={dataDefinition.showErrorMessages}
               collapse={collapseLevel}
+              // collapseAnimationTime={100}
               showCollectionCount={
                 showCount === 'Yes' ? true : showCount === 'When closed' ? 'when-closed' : false
               }

src/JsonEditor.tsx

@@ -37,6 +37,7 @@ const Editor: React.FC<JsonEditorProps> = ({
   enableClipboard = true,
   indent = 3,
   collapse = false,
+  collapseAnimationTime,
   showCollectionCount = true,
   restrictEdit = false,
   restrictDelete = false,
@@ -72,6 +73,17 @@ const Editor: React.FC<JsonEditorProps> = ({
 
   const [data, setData] = useData<JsonData>({ setData: srcSetData, data: srcData })
 
+  const docRoot = document.querySelector(':root') as HTMLElement
+  const transitionTime = getComputedStyle(document.documentElement).getPropertyValue(
+    '--jer-expand-transition-time'
+  )
+  if (
+    collapseAnimationTime !== undefined &&
+    parseFloat(transitionTime) * 1000 !== collapseAnimationTime
+  ) {
+    docRoot?.style.setProperty('--jer-expand-transition-time', `${collapseAnimationTime / 1000}s`)
+  }
+
   useEffect(() => {
     const debounce = setTimeout(() => setDebouncedSearchText(searchText), searchDebounceTime)
     return () => clearTimeout(debounce)

src/types.ts

@@ -22,6 +22,7 @@ export interface JsonEditorProps {
   id?: string
   indent?: number
   collapse?: boolean | number | FilterFunction
+  collapseAnimationTime?: number // ms
   showCollectionCount?: boolean | 'when-closed'
   restrictEdit?: boolean | FilterFunction
   restrictDelete?: boolean | FilterFunction