fix: fix ref issue.

Author: jaywcjlove

core/src/Container.test.tsx

@@ -0,0 +1,34 @@
+import userEvent from '@testing-library/user-event';
+import { screen, render, waitFor } from '@testing-library/react';
+import JsonView from './';
+import React from 'react';
+
+const avatar = 'https://i.imgur.com/MK3eW3As.jpg';
+const example = {
+  avatar,
+};
+
+it('renders <JsonView /> Container test case', async () => {
+  const user = userEvent.setup();
+  const divref = React.createRef<HTMLDivElement>();
+  const { container } = render(
+    <JsonView value={example} ref={divref}>
+      <JsonView.Copied data-testid="copied" />
+      <JsonView.CountInfoExtra data-testid="infoExtra" />
+    </JsonView>,
+  );
+  expect(container.firstElementChild).toBeInstanceOf(Element);
+  await user.hover(container.lastElementChild!);
+  const copied = screen.getByTestId('copied');
+  expect(copied.style).toHaveProperty('height', '1em');
+  expect(copied.style).toHaveProperty('width', '1em');
+  expect(copied.style).toHaveProperty('cursor', 'pointer');
+  expect(copied.style).toHaveProperty('vertical-align', 'middle');
+  expect(copied.style).toHaveProperty('margin-left', '5px');
+  await user.unhover(container.lastElementChild!);
+  const uncopied = screen.getByTestId('infoExtra');
+  expect(uncopied.nextElementSibling).toBeNull();
+  await waitFor(() => {
+    expect(divref.current instanceof HTMLDivElement).toBeTruthy();
+  });
+});

core/src/Container.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useId, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useId } from 'react';
 import { NestedClose } from './comps/NestedClose';
 import { NestedOpen } from './comps/NestedOpen';
 import { KeyValues } from './comps/KeyValues';
@@ -14,17 +14,15 @@ export interface ContainerProps<T extends object> extends React.HTMLAttributes<H
 }
 export const Container = forwardRef(<T extends object>(props: ContainerProps<T>, ref: React.Ref<HTMLDivElement>) => {
   const { className = '', children, parentValue, keyid, level = 1, value, initialValue, keyName, ...elmProps } = props;
-  const $ref = useRef<HTMLDivElement>(null);
   const dispatch = useShowToolsDispatch();
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(ref, () => $ref.current, [$ref]);
   const subkeyid = useId();
   const defaultClassNames = [className, 'w-rjv-inner'].filter(Boolean).join(' ');
   const reset: React.HTMLAttributes<HTMLDivElement> = {
     onMouseEnter: () => dispatch({ [subkeyid]: true }),
     onMouseLeave: () => dispatch({ [subkeyid]: false }),
   };
   return (
-    <div className={defaultClassNames} {...elmProps} {...reset}>
+    <div className={defaultClassNames} ref={ref} {...elmProps} {...reset}>
       <NestedOpen expandKey={subkeyid} value={value} level={level} keyName={keyName} initialValue={initialValue} />
       <KeyValues expandKey={subkeyid} value={value} level={level} />
       <NestedClose expandKey={subkeyid} value={value} level={level} />