fix: remove requirement to use Allotment.Pane if using refs with chil…

…dren

README.md

@@ -49,27 +49,3 @@ export const App = () => (
   </Allotment>
 );
 ```
-
-### Passing a `ref` to a child
-
-If you need to attach a ref to a child component then you must wrap it in a `Allotment.Pane` component.
-
-```jsx
-import React from "react";
-import { Allotment } from "allotment";
-
-export const App = () => {
-  const ref = React.useRef(null);
-
-  return (
-    <Allotment>
-      <Allotment.Pane>
-        <ComponentA ref={ref}>
-      </Allotment.Pane>
-      <ComponentB>
-    </Allotment>
-  )
-};
-```
-
-Under the hood the library needs to attach a ref to the immediate children. This overwrites any existing refs which will not be populated/called. This limitation may go away in a future release.

src/allotment.tsx

@@ -42,7 +42,6 @@ const Allotment = ({
   const splitViewContainerRef = useRef<HTMLDivElement>(null!);
   const splitViewRef = useRef<SplitView | null>(null);
   const splitViewViewRef = useRef<Record<string, HTMLElement>>({});
-  const viewRef = useRef<Record<string, HTMLElement>>({});
 
   const childrenArray = useMemo(
     () => React.Children.toArray(children).filter(React.isValidElement),
@@ -129,27 +128,21 @@ const Allotment = ({
             return null;
           }
 
+          const key = child.key ?? index;
+
           return (
             <div
-              key={child.key ?? index}
+              key={key}
               ref={(el: HTMLElement | null) => {
                 if (el) {
-                  splitViewViewRef.current[child.key ?? index] = el;
+                  splitViewViewRef.current[key] = el;
                 } else {
-                  delete splitViewViewRef.current[child.key ?? index];
+                  delete splitViewViewRef.current[key];
                 }
               }}
               className={classNames(styles.splitViewView)}
             >
-              {React.cloneElement(child, {
-                ref: (el: HTMLElement | null) => {
-                  if (el) {
-                    viewRef.current[child.key ?? index] = el;
-                  } else {
-                    delete viewRef.current[child.key ?? index];
-                  }
-                },
-              })}
+              {child}
             </div>
           );
         })}