handle default button visibility

packages/react-json-tree/src/JSONNestedNode.tsx

@@ -112,6 +112,7 @@ export default function JSONNestedNode(props: Props) {
     shouldExpandNodeInitially,
     shouldExpandNode,
     styling,
+    setEnableDefaultButton,
   } = props;
 
   const [expanded, setExpanded] = useState<boolean>(
@@ -131,8 +132,11 @@ export default function JSONNestedNode(props: Props) {
   }, [defaultExpanded, shouldExpandNode]);
 
   const handleClick = useCallback(() => {
-    if (expandable) setExpanded(!expanded);
+    if (expandable) {
-  }, [expandable, expanded]);
+      setExpanded(!expanded);
+      setEnableDefaultButton(true);
+    }
+  }, [expandable, expanded, setEnableDefaultButton]);
 
   const renderedChildren =
     expanded || (hideRoot && level === 0)

packages/react-json-tree/src/expandableButtons.tsx

@@ -5,6 +5,8 @@ import { Expandable } from '.';
 
 interface Props {
   expandable?: Expandable;
+  enableDefaultButton: boolean;
+  setEnableDefaultButton: any;
   shouldExpandNode?: 'expand' | 'collapse' | 'default';
   setShouldExpandNode: any;
 }
@@ -14,6 +16,7 @@ interface ExpandButtonProps {
   expandIcon?: ReactNode;
   shouldExpandNode?: 'expand' | 'collapse' | 'default';
   setShouldExpandNode: any;
+  setEnableDefaultButton: any;
 }
 
 interface CollapseButtonProps {
@@ -21,15 +24,19 @@ interface CollapseButtonProps {
   collapseIcon?: ReactNode;
   shouldExpandNode?: 'expand' | 'collapse' | 'default';
   setShouldExpandNode: any;
+  setEnableDefaultButton: any;
 }
 
 interface DefaultButtonProps {
   defaultIcon?: ReactNode;
   setShouldExpandNode: any;
+  setEnableDefaultButton: any;
 }
 
 function ExpandableButtons({ 
   expandable,
+  enableDefaultButton,
+  setEnableDefaultButton,
   setShouldExpandNode,
   shouldExpandNode
  }: Props){
@@ -41,15 +48,17 @@ function ExpandableButtons({
 
     return (
       <div style={{position: 'absolute', display: 'flex', justifyContent:'center', alignItems: 'center', gap:'1rem', top: '1rem', right: '1rem', cursor: 'pointer'}}>
-        <DefaultButton
+        {enableDefaultButton && <DefaultButton
           defaultIcon={expandable?.defaultIcon}
           setShouldExpandNode={setShouldExpandNode}
-        />
+          setEnableDefaultButton={setEnableDefaultButton}
+        />}
 
         <ExpandButton
           expandableDefaultValue={expandableDefaultValue}
           expandIcon={expandable?.expandIcon}
           setShouldExpandNode={setShouldExpandNode}
+          setEnableDefaultButton={setEnableDefaultButton}
           shouldExpandNode={shouldExpandNode}
         />
         
@@ -57,14 +66,18 @@ function ExpandableButtons({
           expandableDefaultValue={expandable?.defaultValue}
           collapseIcon={expandable?.collapseIcon}
           setShouldExpandNode={setShouldExpandNode}
+          setEnableDefaultButton={setEnableDefaultButton}
           shouldExpandNode={shouldExpandNode}
         />
       </div>
     )
 }
 
-function ExpandButton({ expandableDefaultValue, expandIcon, shouldExpandNode, setShouldExpandNode }: ExpandButtonProps) {
+function ExpandButton({ expandableDefaultValue, expandIcon, shouldExpandNode, setEnableDefaultButton, setShouldExpandNode }: ExpandButtonProps) {
-    const onExpand = () => setShouldExpandNode('expand');
+    const onExpand = () => {
+      setShouldExpandNode('expand');
+      setEnableDefaultButton(true);
+    }
   
     const isDefault = !shouldExpandNode ||shouldExpandNode === 'default'
 
@@ -79,8 +92,11 @@ function ExpandButton({ expandableDefaultValue, expandIcon, shouldExpandNode, se
     return <></>;
   }
   
-  function CollapseButton({ expandableDefaultValue, collapseIcon, shouldExpandNode, setShouldExpandNode }: CollapseButtonProps) {
+  function CollapseButton({ expandableDefaultValue, collapseIcon, shouldExpandNode, setEnableDefaultButton, setShouldExpandNode }: CollapseButtonProps) {
-    const onCollapse = () => setShouldExpandNode('collapse');
+    const onCollapse = () => {
+      setShouldExpandNode('collapse');
+      setEnableDefaultButton(true);
+    }
   
     const isDefault = !shouldExpandNode ||shouldExpandNode === 'default'
 
@@ -95,8 +111,11 @@ function ExpandButton({ expandableDefaultValue, expandIcon, shouldExpandNode, se
     return <></>;
   }
   
-  function DefaultButton({defaultIcon, setShouldExpandNode }:DefaultButtonProps) {
+  function DefaultButton({defaultIcon, setEnableDefaultButton, setShouldExpandNode }:DefaultButtonProps) {
-    const onDefaultCollapse = () => setShouldExpandNode('default');
+    const onDefaultCollapse = () => {
+      setShouldExpandNode('default');
+      setEnableDefaultButton(false)
+    }
     
     return (
       <div role="presentation" onClick={onDefaultCollapse}>

packages/react-json-tree/src/index.tsx

@@ -58,6 +58,7 @@ export function JSONTree({
   collectionLimit = 50,
   sortObjectKeys = false,
 }: Props) {
+  const [enableDefaultButton, setEnableDefaultButton] = useState(false);
   const [shouldExpandNode, setShouldExpandNode] = useState();
 
   const styling = useMemo(
@@ -77,6 +78,7 @@ export function JSONTree({
         valueRenderer={valueRenderer}
         shouldExpandNodeInitially={shouldExpandNodeInitially}
         shouldExpandNode={shouldExpandNode}
+        setEnableDefaultButton={setEnableDefaultButton}
         hideRoot={hideRoot}
         getItemString={getItemString}
         postprocessValue={postprocessValue}
@@ -86,6 +88,8 @@ export function JSONTree({
 
       <ExpandableButtons 
         expandable={expandable}
+        enableDefaultButton={enableDefaultButton}
+        setEnableDefaultButton={setEnableDefaultButton}
         shouldExpandNode={shouldExpandNode}
         setShouldExpandNode={setShouldExpandNode}
       />

packages/react-json-tree/src/types.ts

@@ -53,6 +53,7 @@ export interface CommonExternalProps {
   isCustomNode: IsCustomNode;
   collectionLimit: number;
   sortObjectKeys: SortObjectKeys;
+  setEnableDefaultButton: any;
 }
 
 export interface CommonInternalProps extends CommonExternalProps {