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',
-        position: 'absolute',
+    top: 50,
-        top: 50,
+    background: '#FFFFFF',
-        background: '#FFFFFF',
+    boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
-        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+    borderRadius: 10,
-        borderRadius: 10,
+    padding: '12px 24px',
-        padding: '12px 24px',
+}));
-        ...extraStyle,
+
-    })
+const Panel = forwardRef<HTMLDivElement, ComponentPropsWithRef<'div'>>(
+    ({ onClick, ...rest }, ref) => {
+        const stopPropagation = (e: MouseEvent<HTMLDivElement>) => {
+            onClick?.(e);
+            e.stopPropagation();
+        };
+
+        return <StyledPanel ref={ref} onClick={stopPropagation} {...rest} />;
+    }
 );
 
-const Panel = ({
-    children,
-    extraStyle,
-}: {
-    children: ReactNode;
-    extraStyle?: CSSProperties;
-}) => {
-    const stopPropagation = (e: MouseEvent<HTMLDivElement>) =>
-        e.stopPropagation();
-
-    return (
-        <StyledPanel style={extraStyle} onClick={stopPropagation}>
-            {children}
-        </StyledPanel>
-    );
-};
-
 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>