chore: simplify panel

libs/components/editor-blocks/src/blocks/group/components/Panel.tsx

@@ -1,33 +1,25 @@
 import { styled } from '@toeverything/components/ui';
-import type { ReactNode, MouseEvent, CSSProperties } from 'react';
+import type { ComponentPropsWithRef, MouseEvent } from 'react';
+import { forwardRef } from 'react';
 
-const StyledPanel = styled('div')<{ extraStyle?: CSSProperties }>(
+const StyledPanel = styled('div')(() => ({
-    ({ extraStyle }) => ({
     position: 'absolute',
     top: 50,
     background: '#FFFFFF',
     boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
     borderRadius: 10,
     padding: '12px 24px',
-        ...extraStyle,
+}));
-    })
-);
 
-const Panel = ({
+const Panel = forwardRef<HTMLDivElement, ComponentPropsWithRef<'div'>>(
-    children,
+    ({ onClick, ...rest }, ref) => {
-    extraStyle,
+        const stopPropagation = (e: MouseEvent<HTMLDivElement>) => {
-}: {
+            onClick?.(e);
-    children: ReactNode;
-    extraStyle?: CSSProperties;
-}) => {
-    const stopPropagation = (e: MouseEvent<HTMLDivElement>) =>
             e.stopPropagation();
-
-    return (
-        <StyledPanel style={extraStyle} onClick={stopPropagation}>
-            {children}
-        </StyledPanel>
-    );
         };
 
+        return <StyledPanel ref={ref} onClick={stopPropagation} {...rest} />;
+    }
+);
+
 export { Panel };

libs/components/editor-blocks/src/blocks/group/components/group-by/GroupBy.tsx

@@ -62,7 +62,7 @@ const GroupBy = ({ closePanel }: { closePanel: () => void }) => {
     };
 
     return (
-        <Panel extraStyle={panelStyle}>
+        <Panel style={panelStyle}>
             <Item disabled>
                 <div>COLUMN</div>
             </Item>

libs/components/editor-blocks/src/blocks/group/components/sorter/Sorter.tsx

@@ -24,7 +24,7 @@ const Sorter = ({
     };
 
     return (
-        <Panel extraStyle={extraStyle}>
+        <Panel style={extraStyle}>
             <GroupBySelector />
             <div>
                 <Title>