refactor: split Group component

webapp/packages/core-blocks/src/Containers/BASE_CONTAINERS_STYLES.ts

@@ -130,5 +130,15 @@ export const BASE_CONTAINERS_STYLES = composes(
       margin: 0;
       text-transform: uppercase;
       opacity: 0.9;
-    }  
+    }
+
+    GroupClose {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+      display: flex;
+      position: absolute;
+      right: 24px;
+      margin-right: 0 !important;
+    }
   `);

webapp/packages/core-blocks/src/Containers/Group.tsx

@@ -7,9 +7,7 @@
  */
 
 import { forwardRef } from 'react';
-import styled, { css } from 'reshadow';
 
-import { Icon } from '../Icon';
 import { filterContainerFakeProps } from './filterContainerFakeProps';
 import type { IContainerProps } from './IContainerProps';
 
@@ -17,35 +15,15 @@ interface Props extends IContainerProps {
   form?: boolean;
   center?: boolean;
   box?: boolean;
-  onClose?: () => void;
 }
 
-const style = css`
-  close {
-    width: 18px;
-    height: 18px;
-    cursor: pointer;
-    display: flex;
-    position: absolute;
-    right: 24px;
-    margin-right: 0 !important;
-  }
-`;
-
 export const Group = forwardRef<HTMLDivElement, Props & React.HTMLAttributes<HTMLDivElement>>(function Group({
   form,
   center,
   box,
-  children,
-  onClose,
   ...rest
 }, ref) {
   const divProps = filterContainerFakeProps(rest);
 
-  return styled(style)(
-    <div ref={ref} {...divProps}>
-      {onClose && <close><Icon name="cross" viewBox="0 0 16 16" onClick={onClose} /></close>}
-      {children}
-    </div>
-  );
+  return <div ref={ref} {...divProps} />;
 });

webapp/packages/core-blocks/src/Containers/GroupClose.tsx

@@ -0,0 +1,20 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { Icon } from '../Icon';
+
+interface IProps {
+  onClick?: () => void;
+}
+
+export const GroupClose: React.FC<IProps & React.HTMLAttributes<HTMLDivElement>> = function GroupClose({
+  onClick,
+  ...rest
+}) {
+  return <close {...rest}><Icon name="cross" viewBox="0 0 16 16" onClick={onClick} /></close>;
+};

webapp/packages/core-blocks/src/index.ts

@@ -99,6 +99,7 @@ export * from './FormControls/Filter';
 export * from './Containers/BASE_CONTAINERS_STYLES';
 export * from './Containers/Container';
 export * from './Containers/Group';
+export * from './Containers/GroupClose';
 export * from './Containers/GroupItem';
 export * from './Containers/GroupTitle';
 export * from './Containers/ColoredContainer';